两列网格，右列有两行答案

【问题标题】：Two-column grid, with right column having two rows两列网格，右列有两行
【发布时间】：2015-11-16 21:42:05
【问题描述】：

我有一个 CSS 问题。我正在使用 Drupal，我不能只输入 <br />，所以我必须使用 CSS 来解决这个问题。

对于我网站上的个人文章，我会显示文章作者的照片以及他们的姓名和他们在组织中的角色，因此理想情况下它在页面上应该是这样的（想象一下 IMG 块' 只是一张巨大的图片）：

IMG
IMG  by Author Name
IMG  Author Role
IMG

所以左边是一个图像，右边是名字和角色，名字正下方的角色。

但是，我得到的是以下内容，我基本上无法弄清楚如何进行简单的换行：

IMG
IMG by Author Name Author Role
IMG
IMG

整个内容（图像、名称和角色）都在 <div> 中。 <div> 是 text-align: center。 <div> 中的各个项目也在它们自己的<div> 中并设置为display: inline-block（因此整体<div> 可以居中对齐）。

我不知道如何将作者角色放在作者姓名正下方的自己的行中，同时仍在图片的右侧！

我尝试过浮动作者角色，将其显示更改为阻塞、弯曲和内联……但似乎没有任何效果。该角色要么完全置于<div> 之下，要么仅保留在作者姓名的右侧。

这是我的标记：

// <div> around author photo, name, and title
.group-left {
    text-align: center;
    margin-bottom: 18px;
}

.field-name-ds-user-picture {
    width: auto;
    display: inline-block;

    // style actual photo to be a certain size and alignment
    img {
        width: 65px;
        height: 65px;
        margin-right: 10px;
        vertical-align: middle;
    }
}

// styling of author name - make block
.field-name-author {
    display: inline-block;
    margin-top: 22px;
    font-size: 0.8em;
}

.field-name-display-suite-role {
    font-size: 0.8em;
    display: inline-block;
}

有谁知道如何使角色只转到名称下的下一行，但仍位于图像的右侧？

【问题讨论】：

你能把作者和角色包装在他们自己的容器里吗？如果是这样，那么这就是你要找的吗？ jsfiddle.net/ao78019c
@JusticeErolin 我添加了我的标记。

标签： html css drupal flexbox

【解决方案1】：

你可以用flexbox实现布局：

HTML

<div class="container">
    <div class="box image">IMAGE</div>
    <div class="inner-container">
        <div class="box author_name">by Author Name</div>
        <div class="box author_role">Author Role</div>
    </div>
</div>

CSS（包括演示的非必要装饰样式）

.container {
    display: flex;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    width: 300px;
}

.box {
    background-color: lightgreen;
    border: 1px solid #ccc;
    text-align: center;
}

.inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image {
    width: 100px;
    height: 100px;
}

.author_name,
.author_role {
    width: 200px;
    padding: 5px;
}

上面的代码呈现了这个布局：

DEMO

【讨论】：