内联块元素在下方扩展空间答案

【问题标题】：Inline-block elements expanding space below内联块元素在下方扩展空间
【发布时间】：2014-03-28 23:10:40
【问题描述】：

使用 inline-block 元素（垂直对齐顶部）创建页面布局。唯一的问题是，另一组内联块元素下方的内联块元素不会像浮动元素那样折叠到开放空间中。几乎就像它遵守行式规则一样。有什么解决办法吗？

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 示例)，这样我就不需要添加额外的标记了。

【问题讨论】：

你为什么使用内联块而不是浮动 div？
-1 用于内联块布局。这种技术需要死。使用浮点数。
因为浮动不适用于页面布局和结构。浮点数应该用于包装文本。无论如何，我们不要让这个线程成为浮动与内联块的 bash 之战。
@user1721135 你为什么不提供一个可行的浮动解决方案，并解释为什么它们更好，而不是反对这个问题？
@Achimmer 你是说内联块用于布局吗？不是。

标签： html layout css

【解决方案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/ 了解工作示例

【讨论】：

这就是我所害怕的。
哦，为了记录，我不是说它像一张桌子，而是像一行，或者正如你所说的：一行文本。

【解决方案2】：

float 和 inline-block 都不会做你想做的事情，除非你将每一列包装在它自己的 div 中。除此之外，还有一些 JavaScript 解决方案可以做到这一点，例如 Masonry。（不过，这涉及到很多定位。）

【讨论】：

【解决方案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;
}

【讨论】：