Question

使用内联块元素创建页面布局（垂直对齐到顶部）。唯一的问题是，另一组内联块元素下面的内联块元素不会像浮动元素那样折叠到开放空间中。它几乎就像是遵循类似行的规则。对此有什么修正吗？

CSS

* {
    font-family:helvetica;
    font-size:18px;
}
.container {
    margin:0 auto;
    width:90vp;
}
.main_content {
    background:red;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:76.04%;
    min-height:200px;
}
.content_details {
    background:blue;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:22.39%;
    margin-left:01.56%;
    min-height:250px;
}
.comments {
    background:green;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:76.04%;
    min-height:150px;
}

HTML

<div class="container">
    <div class="main_content">
        <h1>Main Content</h1>
    </div
    ><div class="content_details">
        <h2>Details</h2>
    </div
    ><div class="comments">
        <h2>Comments</h2>
    </div>
</div>

请注意我可以更改标记以仅创建两个内联块元素（创建两列），但是我想知道是否有针对3个单独的内联块元素的修复（如JSFiddle示例中所示）），这样我就不需要添加额外的标记了。

Answer 1

浮点数或内联块都不会在那里做你想要的，除非你将每一列包装在它自己的div中。除此之外，还有JavaScript解决方案，例如Masonry。（但它涉及很多定位。）

Answer 2

没有没有..不像你在谈论。你必须使用：

<div id="col1">
    <div id="maincontent"></div>
    <div id="comments"></div>
</div>
<div id="details"></div>

然后您将#col1和#details作为inline-block元素。

inline-block的重点是内联（即与其他元素在一条线上）不就像表格一样你建议，它的行为就像一行文本（应该如此），它比它的容器更宽，并且可以打破到下一行。

请参阅此处：http://jsfiddle.net/GXmM6/了解工作示例

Answer 3

我是否认为您希望.content_details成为侧边栏？然后我将其从display: inline-block更改为float: right，将.comments无缝地放在.main-content下方。有关工作示例，请参阅http://jsfiddle.net/koivo/7UqqF/。认为即使只适用于display: block ...

* {
    font-family: helvetica;
    color: white; /* added */
    font-size: 18px;
}
.container {
    margin: 0 auto;
    width: 90vp;
}
.main_content {
    background: red;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 76.04%;
    min-height: 200px;
}
.content_details {
    background: blue;
    /* display: inline-block; */
    float: right; /* added */
    vertical-align: top;
    box-sizing: border-box;
    width: 22.39%;
    margin-left: 01.56%;
    min-height: 250px;
}
.comments {
    background: green;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 76.04%;
    min-height: 150px;
}

内联块元素扩展了下面的空间

3 个答案: