如何使div’left’和’right’并排看起来像列?
我知道我可以使用float:left on they and that will work … but on step 5 and 6 in here 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>
解决方法
不使用浮点时的通常方法是使用display:inline-block:
http://www.jsfiddle.net/zygnz/1/
.container div { display: inline-block; }
注意它的局限性:在第一个块之后有一个额外的空间 – 这是因为两个块现在基本上是内联元素,如a和em,因此两个计数之间的空格。这可能会打破你的布局和/或看起来不好,我不想去掉字符之间的所有空格,为了这个工作。
浮动也更灵活,在大多数情况下。