具有两个等高列且一列有两行的布局

Question

我目前正在开发一个论坛主题，并试图弄清楚如何完成最后的工作，即帖子。我想做的例子：

因此，这里要记住的关键是用户信息和帖子内容如何具有不同的颜色，以及网格中的帖子描述与帖子内容位于同一列中。

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

我真的只是在这里寻求头脑风暴。这样做的最佳方法是什么？

---

我创建了最终结果的草稿，如下所示：

您提供的代码稍作修改应该没问题，但我有一些问题。

1）你评论说描述有一个设定的高度？有必要吗？最坏的情况我只是在媒体查询中调整这个高度。

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

Answer 1

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

为了使两列具有相同的高度，我们可以使用该属性，该属性控制横轴align-items上 Flex 项目之间的空间分布。

默认值为stretch，这使得项目能够延伸容器的整个长度。

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

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

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

下面的代码呈现此效果（边框仅用于演示目的）：

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

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

jsFiddle

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

容器有一个最小高度 ( min-height: 250px;)，以确保在两个盒子中都没有内容时它不会变得太小。

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

浏览器支持： 除了 IE < 10 之外，所有主要浏览器都支持 Flexbox 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。更多详细信息请参阅此答案。