Question

我正在开发一个论坛主题，我正在试图弄清楚如何做最后一点，帖子。我想做的例子：

因此，需要牢记的关键是用户信息和帖子内容的颜色不同，以及网格中的帖子描述与帖子内容位于同一列。

使用简单的div设置不起作用，因为我需要用户信息高度来控制帖子内容的高度，反之亦然。使用具有用户信息背景颜色的包装元素将起作用，但前提是帖子内容高于用户信息。

我真的只是想在这里集思广益。这样做最好的方法是什么？

我在这里创建了最终结果的草稿：

I created a draft of what the final result should look like here.

你提供的代码略有改变应该没问题，但我有一些问题。

1）你评论说明有一个设定的高度？它需要吗？最糟糕的情况我只是在媒体查询中调整这个高度。

2）我可能还需要在Post描述中包含一些列。正如你在我的选秀中看到的那样，左边的容器上有帖子的时间戳（让我们称之为desc-meta），而右边那里有一个带ID的永久链接（让我们看看）称之为desc-ID）。在两者之间还有一组帖子选项（编辑，报告等）（让我们调用desc-edit），但是与描述的右侧对齐。根据我对flex的简要理解，我无法弄清楚如何始终将desc-meta和desc-ID保存在同一行上，而desc-meta可以在较小的屏幕上根据需要向下移动。

Answer 1

可以使用CSS flexbox实现此布局。

对于两个具有相同高度的列，我们可以使用align-items属性，该属性控制交叉轴上的弹性项目之间的空间分布。

默认值为stretch，可使项目扩展容器的整个长度。

.container-outer { align-items: stretch; }

我们还可以使用flex-grow属性来控制主轴中flex项目之间的可用空间分配方式。

.post-content { flex-grow: 1; }

下面的代码呈现这个（边框仅用于演示目的）：

.container-outer {
    display: flex;
    align-items: stretch; /* tells boxes to stretch vertically (default value)  */
    width: 75%; 
    min-height: 250px;
    border: 5px solid mistyrose;   
}
.user-info {
    display: flex;          /* nested flexbox, to enable flex properties */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    border: 3px solid red;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: red;
    box-sizing: border-box;
    overflow: auto;
}
.container-inner {
    display: flex;         /* nested flexbox */
    flex-direction: column;
    width: 100%;
    border: 3px dashed black;
    overflow: auto;
}
.post-description {
    display: flex;         /* nested flexbox */
    justify-content: center;
    align-items: center;
    height: 50px;          /* fixed height */
    border: 3px solid green;
    font-family: verdana;
    font-weight: bold;
    font-size: 1.5em;
    color: green;
    box-sizing: border-box;
    overflow: auto;
}
.post-content {
    display: flex;          /* nested flexbox */
    justify-content: center;
    align-items: center;
    flex-grow: 1;          /* box takes all available space (stretch, basically) */
    border: 3px solid blue;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: blue;
    box-sizing: border-box;
    overflow: auto;
}

<article class="container-outer">
    <section class="user-info">USER<br>INFO</section>
    <div class="container-inner">
        <section class="post-description">POST DESCRIPTION</section>
        <section class="post-content">POST CONTENT</section>
    </div><!-- end .container-inner -->    
</article><!-- end .container-outer -->

jsFiddle

无论在USER INFO或POST CONTENT中放置多少内容或多少内容，两列都将保持相等的高度。

容器的最小高度为min-height: 250px;，以确保在任何一个框中都没有内容时它不会太小。

flex-grow仅适用于POST CONTENT，因为USER INFO已经通过从容器继承高度来扩展完整高度，并且POST DESCRIPTION具有固定的高度，因此它不会展开。

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

中的更多详细信息

Answer 2

我最初的想法是做这样的事情：

<div class="one">
</div>
<div class="container">
  <div class="two">
  </div>
  <div class="three">
  </div>
</div>

然后给左侧div显示内联块和内联块的右侧容器，内部div保持阻塞。

.one {
  display: inline-block;
}
.container {
  display: inline-block;
}

Answer 3

我会将display: table与相应的行/单元格一起使用。请参阅此http://jsfiddle.net/ycsmo9vg/，应根据您的需要轻松扩展

注意在第二个单元格中，我有2个div，1个具有类row，第二个div是普通的（不需要类）。这取决于你。由于div是块级元素，因此它将自动占用一行。虽然我会说保持一致，但只要有row

，就会有row的等级

具有两个相等高度列和一列的布局有两行

3 个答案:

jsFiddle