具有两个等高列且一列有两行的布局
Layout with two equal height columns and one column has two rows
我目前正在开发一个论坛主题，并试图弄清楚如何做最后一点，posts。我想做的例子：
所以这里要记住的关键是用户信息和 Post 内容如何有不同的颜色，以及网格中的 Post 描述与 Post 内容.
使用简单的 div 设置不起作用，因为我需要用户信息高度来控制 Post 内容的高度，反之亦然。使用具有用户信息背景颜色的包装器元素会起作用，但前提是 Post 内容高于用户信息。
我真的只是想在这里集思广益。执行此操作的最佳方法是什么？
我在这里创建了最终结果的草稿：
你提供的代码稍作修改应该没问题，但我有一些问题。
1) 你说描述有设定高度？有必要吗？最坏的情况我只是在媒体查询中调整这个高度。
2) 我可能也需要在 Post 描述中包含一些列。正如您在我的草稿中看到的那样，左侧容器带有 post 的时间戳（我们称之为 desc-meta），右侧有一个带有 ID 的永久链接（我们称之为 desc-ID）。两者之间还有一组 post 选项（编辑、报告等）（我们称之为 desc-edit），但与描述的右侧对齐。根据我对 flex 的简要了解，我无法弄清楚如何始终将 desc-meta 和 desc-ID 保持在同一行，而 desc-meta 可以在较小的屏幕上根据需要向下移动。
我最初的想法是做这样的事情：
<div class="one">
</div>
<div class="container">
<div class="two">
</div>
<div class="three">
</div>
</div>
然后给左边div一个inline-block的显示和右边的inline-block容器，里面的div仍然是block。
.one {
display: inline-block;
}
.container {
display: inline-block;
}
这个布局可以用CSS flexbox.
实现
为了使两列具有相同的高度，我们可以使用 align-items 属性，它控制 space 在 横轴 [=] 上的弹性项目之间的分布58=].
默认值为 stretch，这使项目能够扩展容器的全长。
.container-outer { align-items: stretch; }
我们还可以使用 flex-grow 属性 来控制 space 在 主轴 中的弹性项目之间的分配方式。
.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有固定高度，所以不会' t展开。
浏览器支持： 所有主流浏览器都支持Flexbox，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 .
我会使用 display: table 和相应的 rows/cells。看到这个 http://jsfiddle.net/ycsmo9vg/ 它应该很容易扩展它以满足您的需要
注意在第二个单元格中，我有 2 个 div，1 个有 class row，第二个 div 是普通的（没有 class 需要）。这取决于你。由于 div 是块级元素，它会自动占一行。尽管我会说保持一致并在任何有 row
的地方都有 row 的 class
我目前正在开发一个论坛主题，并试图弄清楚如何做最后一点，posts。我想做的例子：
所以这里要记住的关键是用户信息和 Post 内容如何有不同的颜色，以及网格中的 Post 描述与 Post 内容.
使用简单的 div 设置不起作用，因为我需要用户信息高度来控制 Post 内容的高度，反之亦然。使用具有用户信息背景颜色的包装器元素会起作用，但前提是 Post 内容高于用户信息。
我真的只是想在这里集思广益。执行此操作的最佳方法是什么？
我在这里创建了最终结果的草稿：
你提供的代码稍作修改应该没问题，但我有一些问题。
1) 你说描述有设定高度？有必要吗？最坏的情况我只是在媒体查询中调整这个高度。
2) 我可能也需要在 Post 描述中包含一些列。正如您在我的草稿中看到的那样，左侧容器带有 post 的时间戳（我们称之为 desc-meta），右侧有一个带有 ID 的永久链接（我们称之为 desc-ID）。两者之间还有一组 post 选项（编辑、报告等）（我们称之为 desc-edit），但与描述的右侧对齐。根据我对 flex 的简要了解，我无法弄清楚如何始终将 desc-meta 和 desc-ID 保持在同一行，而 desc-meta 可以在较小的屏幕上根据需要向下移动。
我最初的想法是做这样的事情：
<div class="one">
</div>
<div class="container">
<div class="two">
</div>
<div class="three">
</div>
</div>
然后给左边div一个inline-block的显示和右边的inline-block容器，里面的div仍然是block。
.one {
display: inline-block;
}
.container {
display: inline-block;
}
这个布局可以用CSS flexbox.
实现为了使两列具有相同的高度，我们可以使用 align-items 属性，它控制 space 在 横轴 [=] 上的弹性项目之间的分布58=].
默认值为 stretch，这使项目能够扩展容器的全长。
.container-outer { align-items: stretch; }
我们还可以使用 flex-grow 属性 来控制 space 在 主轴 中的弹性项目之间的分配方式。
.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有固定高度，所以不会' t展开。
浏览器支持： 所有主流浏览器都支持Flexbox，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
我会使用 display: table 和相应的 rows/cells。看到这个 http://jsfiddle.net/ycsmo9vg/ 它应该很容易扩展它以满足您的需要
注意在第二个单元格中，我有 2 个 div，1 个有 class row，第二个 div 是普通的（没有 class 需要）。这取决于你。由于 div 是块级元素，它会自动占一行。尽管我会说保持一致并在任何有 row
row 的 class