兩列網格，右列有兩行

我有一個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

兩列網格，右列有兩行

回答

相關問題