我试图并排制作 4 列,但中间两列稍短,并且在两列下方都有一个 div。请在此处查看图片:http://postimg.org/image/rw67rh5zf/
我确定这是我搞砸的简单事情,但我不知道它是什么。
此处与此类似的所有其他帖子都通过更正 float 或宽度来解决,但内部 div 有足够的空间在内部并排放置,并且它们都向左浮动。
HTML:
<div id="bottomDiv" style="clear:both; width:478px">
<div id="firstCol" style="float:left; width:239px; background-color:white">
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</div>
<div id="midCols" style="width:478px">
<div id="secCol" style="float:left; clear:none; width:239px; background-color:white">
<ol>
<li>four</li>
<li>five</li>
<li>six</li>
</ol>
</div>
<div id="thirdCol" style="float:left; clear:none; width:239px; background-color:white">
<ol>
<li>seven</li>
<li>eight</li>
<li>nine</li>
</ol>
</div>
<div id="divBenefits" style="width:478px; background-color:#941a41; color:white">
Benefits and Cost of Membership
</div>
</div>
<div id="fourthCol" style="float:left; width:239px">
<ol>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
</ol>
</div>
</div>
最佳答案
您需要将 midCols float 到左侧并将主 div 宽度设置为更宽的值,这样就不会强制 float div 换行。
示例:http://jsfiddle.net/j1voh4kf/
<div id="midCols" style="width:478px;float:left;">
这是一个屏幕截图,将您的代码与我的更改进行了比较:
关于html - div 在下面而不是在旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27475610/