Question

我很难将margin-top放在我的div#q中，它也会影响div#m。

我只是希望它们分开，div#m将位于顶部，div#q位于底部，并在它们之间留有空格。

我尝试过这种方法，但是我失败了，是否有人对我的代码有任何建议？

我有这个HTML：

<div id="m">
    <div id="c" style="background:red;">
        <h3>test 1 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>
        <div id="c" style="background:blue;">
        <h3>test 2 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>
    <div id="c" style="background:yellow;">
        <h3>test 3 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>
    <div id="c" style="background:green;">
        <h3>test 4 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>

</div>
<div id="q" style="background:violet;">
</div>

css：

#m{
    width :400px;
}
#c{
    width:33.33%;
    float : left;
}
#q{
    width: 300px;
    height : 200px;
    margin-top: 20px;
}

Answer 1

清除浮子。例如，使用overflow: hidden - DEMO

#m{
    width: 400px;
    overflow: hidden;
}

另外请不要忘记id - s应唯一。如果您需要在多个元素上应用相同的样式，请改用class。

浮动的div中的边距

1 个答案: