双列网格，右列有两行

Question

我有一个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;
}

是否有人知道如何使角色只是转到名称下的下一行，但仍然在图像的右侧？

Answer 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