CSS浮动和填充答案

【问题标题】：css float and paddingCSS浮动和填充
【发布时间】：2011-06-28 04:09:51
【问题描述】：

这是 HTML 布局：

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

我在左侧 div 中使用了 float: left，在右侧 div 中使用了 float: right。然后，我将padding-top: 10px 用于容器。为什么它不起作用？谢谢。

这是我的第一个风格：

.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;
}

Example here.

【问题讨论】：

你确定结束标签是？
你能用jsfiddle.net这样的网站创建一个例子吗？另外，结束 </left> 标签是拼写错误还是在您的代码中？因为不正确关闭您的 div 标签可能会导致您的问题。
对不起，我打错字了。

标签： html css css-float padding

【解决方案1】：

当您浮动一个元素时，它实际上是将其从文档流中取出，因此向其父元素添加填充不会对其产生影响。您可以在两个内部 div 上使用 margin-top: 10px;。

【讨论】：

是的，你是对的，但是当我使用 float:left 到容器 div 时，填充可以工作。我使用了它的宽度，然后使用了左侧 div 和右侧 div 的宽度。在 IE7、firefox 下，它们都显示正常。但在 IE6 下，右侧 div 显示不正常，在左侧部分下方。为什么？如何改变它。谢谢。
您也可以发布您的 CSS 代码吗？如果您使用了我们看不到的更多宽度和浮动，那么我们可以帮助您找到合适的解决方案:)
它似乎在做你在我做的例子中提出的要求。 jsfiddle.net/Kyle_Sevenoaks/86F2A/1 什么是“不工作？”

【解决方案2】：

将右浮动 div 放在浮动左 div 之前

【讨论】：

【解决方案3】：

不要使用浮点数，而是使用 flex 并将内容对齐到空格

 #container{
  background-color: #FFFFFF;
  padding: 10px 10px 0;
  width: 980px;
  display: flex;
  justify-contents: space-between;
 }

【讨论】：