css float和padding [英] css float and padding

问题描述

这是HTML布局：

        <div class="wrap">
           <div id="container">
               <div id="left">...</div> 
               <div id="right">...</div> 
            </div>
        </div>

我使用 float：left 左div和 float：right 到右div。然后，我使用 padding-top：10px 到容器。为什么不工作？

I used the float: left to the left div, and float: right to the right div. Then, I used the padding-top: 10px to the container. Why doesn't it work? thank you.

这是我的第一种风格：

.wrap {
    float: left;
    width: 1000px
}

#container{
    background-color: #FFFFFF;
    padding: 10px 10px 0;
    width: 980px;
    float: left;
}

#left {
    float: left; 
    width: 670px;
}

#right {
    float: right;
    width: 300px;
}

这里的例子。

推荐答案

浮动元素时，文档流，因此向其父代添加填充不会对其有影响。您可以在两个内部div上使用 margin-top：10px; 。

When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.

这篇关于css float和padding的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！