两列等高的布局，一列有两行

I am developing a forum theme at the moment, and am trying to figure out how to do the last bits, the posts. Example of what I'd like to make:

我现在正在开发一个论坛主题，并且正在试图找出如何做最后的部分，帖子。我想做的例子是:

So the key things to keep in mind here is how User Info and Post Content have different colors, as well as the Post Description in the grid is in the same column as the Post Content.

这里要记住的关键是用户信息和发布内容是如何有不同的颜色的，以及在网格中的发布描述与发布内容在同一列。

Using a simple div setup doesn't work, as I need the User Info height to control the height of Post Content and vice versa. Having a wrapper element with the background color of User Info would work, but only if the Post Content is taller than User Info.

使用简单的div设置不起作用，因为我需要用户信息高度来控制Post内容的高度，反之亦然。拥有一个带有用户信息背景颜色的包装器元素是可行的，但前提是文章内容要比用户信息高。

I am really just looking for brainstorming here. What would be the best way to go about doing this?

我只是想在这里进行头脑风暴。做这件事最好的方法是什么?

---

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

我草拟了一份最终结果的草稿:

It should be fine with the code you have provided altered slightly, but I have some questions.

您所提供的代码应该没有问题，但是我有一些问题。

1) You commented the description has a set height? Does it need to? Worst case scenario I just adjust this height in media queries.

1)你说描述有设置高度?它需要吗?在最坏的情况下，我只是在媒体查询中调整这个高度。

2) I probably need to have some columns within Post description too. As you see in my draft there's a left container with the timestamp (let's call that desc-meta) of the post, and to the right there's a permalink with ID (let's call that desc-ID). There's also a set of post options (Edit, report etc.) between the two (let's call that desc-edit), but aligned to the right side of the description. From my brief understanding of flex I can't figure out how to always keep the desc-meta and desc-ID on the same row, while desc-meta can be moved down if needed on smaller screens.

2)我可能也需要在Post description中包含一些列。正如您在我的草稿中看到的，有一个带有post的时间戳(我们称其为desc-meta)的左侧容器，在右侧有一个带有ID的permalink(我们称其为desc-ID)。在两者之间还有一组post选项(编辑、报告等)(让我们调用desc-edit)，但是对齐到描述的右边。从我对flex的简单理解中，我不知道如何将desc-meta和desc-ID始终保持在同一行，而desc-meta如果需要，可以在小屏幕上向下移动。

3 个解决方案

#1

This layout can be achieved with CSS flexbox.

这种布局可以通过CSS flexbox实现。

For both columns to have equal height we can use the align-items property, which controls space distribution among flex items on the cross-axis.

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

The default value is stretch, which enables items to extend the full length of the container.

默认值是stretch，它允许项扩展容器的整个长度。

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

We can also use the flex-grow property to control how free space is distributed among flex items in the main-axis.

我们还可以使用flex-grow属性来控制在主轴的flex项目中如何分配*空间。

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

The code below renders this (with borders only for demo purposes):

下面的代码呈现了这个(只有用于演示目的的边框):

.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

Regardless of how much or how little content is placed in USER INFO or POST CONTENT, both columns will remain equal height.

无论在用户信息或发布内容中放置了多少或多少内容，这两个列都将保持相同的高度。

The container is given a minimum height (min-height: 250px;) to ensure it doesn't get too small if there is no content in either box.

容器被赋予一个最小的高度(最小的高度:250px;)，以确保在两个框中都没有内容时不会变得太小。

flex-grow is only applied to POST CONTENT because USER INFO already expands full height by inheriting height from the container, and POST DESCRIPTION has a fixed height, so it won't expand.

flex-grow只用于发布内容，因为用户信息已经通过从容器继承高度扩展了整个高度，并且POST DESCRIPTION有一个固定的高度，所以不会展开。

---

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

浏览器支持:除IE < 10外，所有主要浏览器都支持Flexbox。一些最近的浏览器版本，如Safari 8和IE10，需要厂商的前缀。要快速添加前缀，请使用Autoprefixer。在这个答案中有更多的细节。

#2

My initial thoughts would be to do something like this:

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

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

And then give the left div a display of inline-block and the right container of inline-block, and the inner divs remain block.

然后向左侧div显示内联块和内联块的右侧容器，内部div仍然是块。

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

#3

I would use display: table with the corresponding rows/cells. See this http://jsfiddle.net/ycsmo9vg/ it should be easy extend this for your needs

我将使用display: table和相应的行/单元格。请参见http://jsfiddle.net/ycsmo9vg/这应该很容易根据需要扩展

notice how in the second cell, I have 2 divs, 1 has class row and the second div is plain (no class needed). This is up to you. Since a div is a block level element it will automatically take a row. Though I'd say keep it consistent and have a class of row wherever you have a row

注意，在第二个单元格中，有两个div，一个是class row，第二个div是plain(不需要类)。这由你决定。由于div是块级元素，所以它将自动获取一行。但是我要说的是保持一致并且在任何有行的地方都有一个行