Question

我遇到了奇怪的CSS问题。这个jsfiddle很好地展示了它。

HTML：

<div class="container" style="text-align: left;">
    <div class="leftBox">
        <div class="innerWrapper" style="background: gray;">Left</div>          
    </div>
    <div class="rightBox">
         <div class="innerWrapper" style="background: green;">Right</div>
    </div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>

CSS：

.container {
   width: 640px;
   margin: 0 auto;
}
.leftBox {
   width: 340px;
   float: left;
}
.rightBox {
   width: 300px;
   float: left;
}
.innerWrapper {
    width: 300px;
 }

我不明白为什么较低的div会消耗较高的div之间的差距。我希望它只消耗上面两列下面的“行”。

尝试了几种不同的定位和“voodos”，但没有任何帮助。

有什么想法吗？

感谢。

Answer 1

你需要清除自己想要的元素，请参阅小提琴：http://jsfiddle.net/JT5HL/1/

或CSS：

.container {
    clear: both;
    width: 640px;
    margin: 0 auto;
}
.leftBox {
    width: 340px;
    float: left;
}
.rightBox {
    width: 300px;
    float: left;
}
.innerWrapper {
    width: 300px;
}

Answer 2

将“ clear:both ”属性提供给您的“ .container ”类，这是旧方法。

SEE小提琴：* http://jsfiddle.net/KjtJu/1/ *

或者将新解决方案“ overflow: hidden; ”用于“ .container ”类

请参阅小提琴：http://jsfiddle.net/8M3L9/1/

Answer 3

在<div class="clear"></div>内的html中使用container div 在你的CSS中使用.clear{clear:both;}。

<强> HTML：

<div class="container" style="text-align: left;">
    ...
    <div class="clear"></div>
</div>

CSS：

.clear{clear:both;}

<强> DEMO

Answer 4

您可以将innerWrapper更改为100％;

.innerWrapper {
    width: 100%;
}

这似乎有效。

http://jsfiddle.net/JT5HL/4/

Answer 5

<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>

Answer 6

为什么不通过制作width: 320px;来缩小左右之间的差距？

请参阅小提琴： http://jsfiddle.net/JT5HL/7/

或者你可以像这样height: 20px;向容器添加一个高度，这将消除空间中的红色。

请参阅小提琴： http://jsfiddle.net/JT5HL/8/

CSS布局填补了缺失的空间

6 个答案: