0

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

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>

请注意，我可以更改标记以仅创建两个 inline-block 元素（创建两列），但是我想知道是否有针对 3 个单独的 inline-block 元素的修复（如 JSFiddle 示例中），即方式我不需要添加额外的标记。

4

3 回答 3

0

你想.content_details成为一个侧边栏，我猜对了吗？然后我只是将它从display: inline-blockto更改为无缝float: right地放置在您的. 有关工作示例，请参见http://jsfiddle.net/koivo/7UqqF/ 。认为即使只适用于.......comments.main-contentdisplay: 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;
}
于 2014-03-28T15:10:40.363 回答
0

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

于 2013-07-16T22:44:07.207 回答
0

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

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

然后你会有#col1和#details作为inline-block元素。

an 的全部意义inline-block在于它是内联的（即在与其他元素的一行上）它不像你建议的那样像一个表格，它像一个比它的容器更宽的文本行（应该如此）和突破到下一行。

请参阅此处：http: //jsfiddle.net/GXmM6/以获取工作示例

于 2013-07-16T22:44:47.663 回答