html - 行内 block 元素扩展下面的空间

Question

使用行内 block 元素创建页面布局(垂直对齐到顶部)。唯一的问题是，位于另一组内联 block 元素下方的内联 block 元素不会像 float 元素那样折叠到开放空间中。它几乎就像遵守类似行的规则。有任何解决办法吗？

Layout example in JSFiddle

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>

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

Answer 1

不，没有..不像你说的那样。你必须使用:

<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/一个工作示例