Question

一开始抱歉我的英语技能。我会尽力解释我的问题，所以我有基于div的3列布局

<div id="content">
    <div class="container">
        <div class="col-left">
            <h1>O fdfas <span>fdas</span></h1><hr/>
            <div class="box">
                <div class="text">
                Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutru auctor. 
                </div>
            </div>
        </div>
        <div class="col-center">
            <h1>fdas</h1><hr/>              
            <div class="box">
                <div class="text">
                Nullam quis risus eget urna mollis. Cras justo odio, dapibus ac fac
                </div>                  

                <div class="text">
                Aenean lacinia bibendum nulla sed consectetur. Duis mollis, e
                </div>
            </div>
        </div>
        <div class="col-right">
            <h1>Szybki <span>kontakt</span></h1><hr/>
            <div id="contact_box">
                <div class="address">lalala</div>
                <div class="contact">lalala</div>
                <div class="address">lalal</div>
                <div class="contact">lalala</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="col-left">test</div>
        <div class="col-center">test</div>
        <div class="col-right">test</div>
    </div>
</div>

和CSS文件

* {
    padding: 0;
    margin: 0;
}

.container {
    position: relative;
    width: 960px;
    margin:0 auto;
    outline: 1px solid red;
    height: 100px;
}

.container .col-left {
    position: relative;
    display: inline-block;
    float: left;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid green;
}

.container .col-center {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid blue;
}

.container .col-right {
    position: relative;
    display: inline-block;
    float: right;
    width: 292px;
    outline: 1px solid yellow;
}

看看这里：http://jsfiddle.net/1on11esn/ 你在那能看到什么？两行列，但不是我除外。它们是重叠的，我排除第2行应该在整个第1行下面，整个第1行我的意思是在那个具有最大高度的元素下面。再次对不起我的英语技能。我几乎尝试了一切，不知道如何解决这个问题。

Answer 1

我认为你需要的是一个clearfix。

以下是使用clearfix技术的示例的更新JSFiddle。

基本上是将这些CSS规则添加到您的容器中：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

您需要在以下情况下使用clear：

浮动项目可能比同一容器内的非浮动内容高。父容器不会伸展以匹配浮动项目。
如果所有孩子都漂浮着。

使用父（容器）中的clearfix，子项将自行清除。然后容器将自动伸展到所需的高度。

Answer 2

有一些问题。

通常，您不需要在同一元素上同时使用float和inline-block规则。所以我从所有这些规则中删除了float规则。这似乎更容易，因为如果我保留浮动，我必须在每个容器的底部添加一个清算（clear: both）div。

接下来，不应修复容器height（您可以改为使用min-height），但应该将其展开为其子元素reqiure。

接下来，您需要小心容器内每个孩子的宽度，确保它不会超出容器的大小。

请参阅此处的固定示例：http://jsfiddle.net/1on11esn/1/

我所做的一切：

删除了浮动规则
删除了容器的高度（默认为auto）
稍微减少了儿童div的右边距（如果需要可以调整它们）

如果你想将它们与顶部对齐，一个简单的.container > div {vertical-align: top;}应该可行。见这里：http://jsfiddle.net/1on11esn/3/

要解决内联块空格问题，请将font-size: 0;设置为容器元素，将font-size: initial;设置为其子项：http://jsfiddle.net/1on11esn/5/

这样您就可以保留原始宽度而无需进行其他修改。

Answer 3

* {
	padding: 0;
	margin: 0;
}

.container {
	position: relative;
	width: 960px;
	margin:0 auto;
	outline: 1px solid red;
	height: 100px;
}

.container .col-left {

	margin-right: 41px;
	width: 293px;
	outline: 1px solid green;
}

.container .col-center {
	
	margin-right: 41px;
	width: 293px;
	outline: 1px solid blue;
}

.container .col-right {
	
	width: 292px;
	outline: 1px solid yellow;
}
.container div{
    float: left;
    clear: left;
}

列的意外行为

3 个答案: