并排没有浮动

如何让div“左”和“右”看起来像列并排?

我知道我可以使用浮法:留在他们身上,这将工作…但在步骤5和6在这里http://www.barelyfitz.com/screencast…s/positioning/的家伙说,这是可能的,我不能让它工作,但…

码:

<style> div.left { background:blue; height:200px; width:300px; } div.right{ background:green; height:300px; width:100px; } .container{ background:black; height:400px; width:450px; } </style> <div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> 

不使用float的常用方法是使用display: inline-block : http : //www.jsfiddle.net/zygnz/1/

 .container div { display: inline-block; } 

请注意它的局限性:在第一次集合之后有一个额外的空间 – 这是因为这两个块现在基本上是inline元素,如aem ,所以两个计数之间的空格。 这可能会破坏你的布局和/或不好看,为了这个工作我宁愿不去掉字符之间的所有空格。

在大多数情况下,浮游物也更加灵活。

div是一个块级别的元素 ,这意味着它将performance为一个块,并且块不能被浮动并排保留。 但是,您可以将它们设置为内联元素 :

 display:inline-block; 

试一试…


另一种方法是使用它们:

 position:absolute; left:0; 

和/或

 position:absolute; right:0; 

注意:为了达到预期的效果,wrapper元素必须有一个position:relative; 使得绝对定位的元素相对于其包装元素保持不变。

我目前正在研究这个,我已经有了一些解决scheme。 有一个高品质的网站,我可以用也为我的方便是很好的。 因为如果你不写这些东西,你最终会忘记一些部分。 如果你正在开始任何一种新的编程/devise,我也可以推荐写一些基本的东西。

所以如果float函数导致问题,可以尝试一些选项。

其中之一就是修改div标签中的divalignment方式,让它像自己一样<div class="kosher" align=left>如果这不适合你,那么还有另外一个带边距的选项。

 .leftdiv { display: inline-block; width: 40%; float: left; } .rightdiv { display: block; margin-right: 20px; margin-left: 45%; } 

不要忘记删除<div align=left>

你可以试试右边的div

 margin: -200px 0 0 350px; 

您也可以使用现今良好支持的 CSS3 flexbox布局。

 .container { display: flex; flex-flow: row nowrap; justify-content: space-between; background:black; height:400px; width:450px; } .left { flex: 0 0 300px; background:blue; height:200px; } .right { flex: 0 1 100px; background:green; height:300px; } 

请参阅示例 (使用传统样式以获得最大兼容性)和了解有关Flexbox的更多信息。

使用display:table-cell; 去除.Left和.Right之间的空间

 div.left { background:blue; height:200px; width:300px; } div.right{ background:green; height:300px; width:100px; } .container{ background:black; height:400px; width:450px; } .container > div { display: table-cell; } 
 <div class="container"> <div> <div class="left"> LEFT </div> </div> <div> <div class="right"> RIGHT </div> </div> </div>