幾行中同樣高度的內嵌塊元素

我可以在沒有JS和最小高度（作爲特例）的情況下做同樣高度的所有塊嗎？塊可以放在多行上。幾行中同樣高度的內嵌塊元素

Correct height

ul { 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

來源

2016-12-24 Alex

如果flexbox是一個選項，那麼你可以讓ul一個包裝flexbox。

這是如何工作的？

display: flex創建Flexbox的擁有的財產，以各種方式銷售其子女之間的空白。
flex-wrap: wrap允許li s到轉到下一行根據內容
justify-content: center確實水平居中。
縱向上，li有一個名爲align-items: stretch的屬性，它是默認值 - 這允許li s的高度在一條直線上相等。

請參見下面的演示：

ul { 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

來源

2016-12-24 13:57:45 kukkuz

輕鬆，使用display: flex。指定flex-flow: row wrap;取向+包裝和在justify-content: center;

實施例的中心對準：

ul { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

來源

2016-12-24 13:57:51 Roberrrt

幾行中同樣高度的內嵌塊元素

回答

相關問題