是否可以底部對齊圖像並頂部對齊它們下面的標題？

我需要在Zurb基金會Block Grid中安排動態數量的圖像，並且每個圖像都有不同長度的標題。是否可以底部對齊圖像並頂部對齊它們下面的標題？

我想知道是否有任何方式對準一切都那麼：

Image Diagram

我已經能夠底部對齊一切：jsfiddle

ul.block-grid li { 
    display: inline-block; 
    float: none; 
} 

ul.block-grid li img { 
    vertical-align: baseline; 
    width: 100%; 
    max-width: 100%; 
}

但我無法弄清楚如何以實現我想要的對齊。我已經試過絕對定位的字幕，但他們失去他們的寬度和高度（和位置當然在DOM）：jsfiddle

ul.block-grid li p.caption { 
    position: absolute; 
}

任何提示實現這一目標對準不勝感激。

來源

2014-06-19 waffl

不要以爲你可以用這個HTML設置。 – putvande

甚至沒有使用JavaScript？ – waffl

可能..不知道你想要一個解決方案，你應該在你的問題中標記JavaScript。 – putvande

您還可以使用CSS表格來實現此佈局，如下所示。

如果HTML看起來是這樣的：

<div class="row full-width"> 
    <div class="columns small-12"> 
     <ul class="block-grid small-block-grid-5"> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/300x400" /> 
        <p class="caption">Test caption</p> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/300x400" /> 
        <p class="caption">A longer test caption...</p> 
       </a> 
      </li> 
      ... 
     </ul> 
    </div> 
</div>

應用以下CSS：

.row.full-width { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: initial; 
} 
ul.block-grid li { 
    display: inline-table; 
    float: none; 
} 
ul.block-grid li a { 
} 
ul.block-grid li img { 
    vertical-align: baseline; 
    width: 100%; 
    max-width: 100%; 
} 
ul.block-grid li p.caption { 
    text-align: center; 
}

你有足夠好的語義HTML等等很多元素一起工作。

在.block-grid包含區塊內，在li元素上設置display: inline-table。

您可以將vertical-align的值設置爲baseline或bottom，然後根據需要調整子元素的邊距和填充。

這個CSS似乎與Zurb基金會的課程很好。

見演示在：http://jsfiddle.net/audetwebdesign/H5RLG/

設計點評：如果你有一個過長的標題，則會有項中的任意兩行之間超大的空白區域，但你可以隨時添加一個最大高度到p.caption並啓用垂直滾動。另外，使用JavaScript/jQuery，並有一個「顯示更多」按鈕的可擴展面板。

在Firefox中，得到的佈局看起來像：

enter image description here

來源

2014-06-19 14:53:51

這工作得很好！出於好奇，除了舊IE瀏覽器支持外，還有其他什麼原因**不能使用表格行嗎？（類似於使用HTML表格進行佈局的否定性）有什麼方法可以將文本置於「表格行」中？ – waffl

大多數現代瀏覽器都很好地支持CSS表格（使用display屬性）。您的HTML保留了原始標記的語義，這很好，並且通過CSS，您可以更好地控制佈局的視覺渲染方式，這些都完全可以接受。關於表格的否定性回到了佈局由嵌套表格（使用table，tr，td等）和間隔GIF構成的時代，但是我們已經過了那個Web開發時代。 –

非常感謝你，只是想知道我的評論的最後一部分，有沒有辦法在'table-row'項目中居中文本？ – waffl

它可以通過絕對定位來實現。這裏的標題是字幕上的可變高度......您需要將適當的底部邊距應用於包含的行元素，否則標題將與它們下面的任何內容重疊。

JS Fiddle Demo

只有下面的選擇發生了變化......

ul.block-grid li { 
    position: relative; 
    display: inline-block; 
    float: none; 
} 

ul.block-grid li a { 
    display: inline-block; 
    vertical-align: bottom; 
    width: 100%; 
    max-width: 100%; 
} 

.caption { 
    position: absolute; 
    top: 100%; 
}

要回答你的第二問題的排序關於嘗試絕對定位和文本失去它的地位。在我的例子中絕對定位的原因是因爲我將<li>元素設置爲position: relative;這意味着具有絕對定位的LI的任何孩子將相對於<li>而不是相對於<body>定位。

來源

2014-06-19 14:36:35 Michael

謝謝邁克爾，我同意了其他答案，因爲它允許我避免設置保證金/高度以避免重疊。 – waffl

@waffl這當然是更好的答案，我只是發佈這個來告訴你，你接近你正在嘗試的東西。 – Michael

是否可以底部對齊圖像並頂部對齊它們下面的標題？

回答

相關問題