1

我正在创建一个带有标题和徽标的简单 html。我为电子邮件模板这样做，所以都是内联样式。我注意到发生了一个浮动中断，并且图像溢出了它的父级。

<div style="width:640px;">
        <!--  header -->
        <div id="header" style="background-color:#005387; height:160px;">
            <div id="logo-container" style="margin-top:20px;margin-left:20px;">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
            </div>
        </div>
    </div>

http://jsfiddle.net/HMswX/8/

知道为什么会这样吗？当我将溢出：隐藏添加到#header elem 时，它工作正常。但是我没有在其中浮动任何元素，那为什么会有浮动中断？

编辑：

好吧，我不够清楚。更新了代码。我想将margin-top 添加到#logo-container。但是当我这样做时，整个 div 会下降，好像 #header 不在正常流程中（我的意思是浮动中断，这通常发生在我们将元素浮动到父级中时）。

4

4 回答 4

2

JoshC 对您关于为什么会发生这种情况的问题有正确的答案。

为了达到预期的效果，为什么不简单地向父 div 添加一个填充？

<div id="header" style="background-color:#005387; padding:20px">
            <div id="logo-container">

http://jsfiddle.net/HMswX/13/

这使您不必设置明确的高度。

于 2013-09-19T20:41:59.477 回答
2

为什么不直接指定高度img？

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">

http://jsfiddle.net/HMswX/2/

否则不要在标题上指定高度..

http://jsfiddle.net/HMswX/3/

根据你的更新..

边距不起作用，因为div正在崩溃..看看这个：

浮动div.. http://jsfiddle.net/HMswX/10/

申请overflow:auto.. http://jsfiddle.net/HMswX/12/

如果您想了解更多关于折叠的信息，divs请参阅此帖子相同的问题..

为什么这种 CSS margin-top 样式不起作用？

于 2013-09-19T20:04:41.647 回答
1

因为你已经在 id=header 的 div 中定义了：

height:60px;

您希望图像按比例缩小还是您想要的结果是什么？

于 2013-09-19T20:04:35.790 回答
1

我不确定您所说的浮动中断是什么意思，但您height在#header其中指定 a 小于图像的高度。因此，默认情况下，它将溢出。如果您指定overflow:hidden，它将被切断。为什么不删除height并overflow:auto在您的#header? 也可以通过给它一个 来减小图像的大小height。

请参阅jsFiddle 1和jsFiddle 2。

于 2013-09-19T20:05:15.637 回答