两列网格，右列有两行

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

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

来源

2015-11-16 Sage

什么是你的标记？ –

您是否可以将作者和角色包装在自己的容器中？如果是这样，那么这是你在找什么？ http://jsfiddle.net/ao78019c/ – BenSlight

@JusticeErolin我加了我的标记。 – Sage

可以实现与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

来源

2015-11-17 12:31:27

两列网格，右列有两行

回答

相关问题