缩小 float:left 和 float:right 之间的差距答案

【问题标题】：lessen the gap between float:left and float:right缩小 float:left 和 float:right 之间的差距
【发布时间】：2012-09-11 06:57:19
【问题描述】：

我有.content-left 和.content-right，它们分别打算左右浮动。我的问题是两个 div 都设置为width:300px，这比容器的宽度（960px）要小得多。我认为这就是导致.content-left 和.content-right 之间存在如此大差距的原因。我的问题是——如何缩小差距？在这种情况下，负填充和边距似乎不起作用。

CSS：

#container {
    margin: 0 auto;
    width: 960px;
}

.content-left {
    float: left;
    width: 300px;
}

.content-right {
    float: right;
    width: 300px;
}

HTML：

<div id="container">
    <h1>Heading.</h1>
    <div class="content-left">
        //left side content
    </div><!-- end content-left -->
    <div class="content-right">
        //right side content
    </div><!-- end content-right -->
</div><!-- end container -->

【问题讨论】：

嗯，300+300 = 600。960-600 = 360 - 当然有很大的差距？你可以尝试增加每一个的宽度（也许用一个%，比如45%？）

标签： html css css-float margin padding

【解决方案1】：

尝试将两者都向左浮动。然后使用一些margin

如果你真的想使用float left和float right，添加margin-right到那个浮动的right就可以了。

【讨论】：

【解决方案2】：

边距不起作用？嗯，不，它有效。

http://jsfiddle.net/NF8Lk/

【讨论】：