html – 将元素左右放置在同一条线上,如果没有足够的空间,则左侧和左侧

概述我想要的是： 当有足够的空间时,就像这样： .left{ display: inline-block; float: left;}.right{ display: inline-block; float: right;} <div class='parent'> <div class='left'>This should be on the left</div> < 我想要的是：

当有足够的空间时,就像这样：

.left{  display: inline-block;  float: left;}.right{  display: inline-block;  float: right;}

<div class='parent'>  <div class='left'>This should be on the left</div>  <div class='right'>And this should be on the right :)</div></div>

当没有足够的空间时,就像这样：

<div class='parent'>   <div class='left'>This should be on the left</div>   <div class='right'>And this should be on the right :)</div></div>

我怎么做？

解决方法 尝试添加宽度

.left{  display: inline-block;  float: left;  wIDth: 50%}.right{  display: inline-block;  float: right;  wIDth: 50%}

Demo

使用display：table-cell作为非宽度解决方案.并且您需要插入另一个元素来包装内容.

.parent{   display:table;   wIDth:100% } .left{  display: table-cell;  background:grey;  vertical-align:top;}.right{  display: table-cell;  background: blue;  vertical-align: top;}.right span{  float:right}

DEMO 2 updated

得到了你的问题;)你可以使用显示内联

.left{  display: inline;  vertical-align:top;}.right{  display:  inline;  vertical-align: top;}.right span{  float:right}

Demo 3

总结

以上是内存溢出为你收集整理的html – 将元素左右放置在同一条线上,如果没有足够的空间,则左侧和左侧全部内容，希望文章能够帮你解决html – 将元素左右放置在同一条线上,如果没有足够的空间,则左侧和左侧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。