html - div 在下面而不是在旁边

Question

我试图并排制作 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>

Answer 1

您需要将 midCols float 到左侧并将主 div 宽度设置为更宽的值，这样就不会强制 float div 换行。

示例:http://jsfiddle.net/j1voh4kf/

<div id="midCols" style="width:478px;float:left;">

这是一个屏幕截图，将您的代码与我的更改进行了比较: