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

Question

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

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

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

我真的只是想在这里集思广益。执行此操作的最佳方法是什么？

---

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

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

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

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

Answer 1

这个布局可以用CSS来实现flexbox .

为了使两列具有相同的高度，我们可以使用 align-items属性，它控制 cross-axis 上 flex 元素之间的空间分布。

默认值为 stretch，它使元素能够扩展容器的整个长度。

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

我们还可以使用 flex-grow 属性来控制自由空间如何在 main-axis 中的 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 的高度是固定的，所以不会扩展。

---

浏览器支持: 所有主流浏览器都支持 Flexbox，except IE < 10 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加前缀，请使用 Autoprefixer .更多详细信息，请参阅 this answer .