并排没有浮动
如何让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元素，如a和em ，所以两个计数之间的空格。 这可能会破坏你的布局和/或不好看，为了这个工作我宁愿不去掉字符之间的所有空格。
在大多数情况下，浮游物也更加灵活。
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>
