Question

请尝试以下示例代码：

<div style="background-color:#ddd">
<div style="width:900px; margin:0px auto">

    <div class="row">
        <div class="col" style="float:left; width:900px">
            <h1>Title</h1>
        </div>

        <div style="clear:both"></div>
    </div>
</div>
</div>


<div style="background-color:#cfc">
<div style="width:900px; margin:0px auto">

    <div class="row" style="margin-top:10px; border:1px solid #f00">
        <div class="col" style="float:left; width:900px">
            <h2>Content</h2>
        </div>

        <div style="clear:both"></div>
    </div>

</div>
</div>

<div style="background-color:#cfc;">
<div style="width:900px; margin:0px auto">

    <div class="row" style="margin-top:50px; border:1px solid #f00">
        <div class="col" style="float:left; width:900px">
            <h2>Content 2</h2>
        </div>

        <div style="clear:both"></div>
    </div>

</div>
</div>

奇怪的问题是在我将内容块的div.row设置为margin-top：10px之后，Title块也会从浏览器顶部向下移动10px。解决这个问题的任何解决方法？

注意：未加载外部样式表。

Answer 1

对于标题的父div，

添加以下css display: inline-block;

演示： http://jsfiddle.net/HvStn/

Mozilla Firefox CSS Box模型奇怪的问题

1 个答案: