如何修復這個網格的高度？

enter image description here我創建了一個四列內容網格，裏面包含圖像和文本。我面臨的問題是網格框的高度不相等。當有短文本時，框根據文本長度花費。這裏是我更好地理解如何修復這個網格的高度？

的html代碼：

<ul class="rig"> 
<li> 
    <a href="#"> 
     <h2><strong>This text 1</strong></h2> 
     <img src="css/images/image.jpg" /> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <h2><strong>This text 2</strong></h2> 
     <img src="css/images/image1.jpg" /> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <h2><strong>This text 3</strong></h2> 
     <img src="css/images/image2.jpg" /> 
    </a> 
</li> 
<li> 
    <a href="#"> 
     <h2><strong>This text 4</strong></h2> 
     <img src="css/images/image3.jpg" /> 
    </a> 
</li> </ul>

CSS：

ul.rig { 
list-style: none; 
font-size: 0px; 
margin-left: -4.3%; 
margin-bottom: 20px; 
} 
ul.rig li { 
width: 170px; 
display: inline-block; 
margin-top: 10px; 
margin-left: 10px; 
margin-right: 5px; 
margin-bottom: 5px; 
padding: 2px 3px 5px; 
background: #F1f1f1 url() repeat-x top; 
border: 1px solid #c9c9c9; 
font-size: 16px; 
font-size: 1rem; 
vertical-align: top; 
box-shadow: 0 0 5px #ddd; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
margin-left: 5px; 
overflow: hidden; 
} 
ul.rig li a { 
text-decoration: none; 
} 
ul.rig li img { 
width: 145px; 
height: 180px; 
margin: 5px 7px 14px; 
border: 2px solid #535355; 
padding: 0px 0px; 
transition: all 400ms ease-in-out; 
-webkit-transition: all 400ms ease-in-out; 
-moz-transition: all 400ms ease-in-out; 
-o-transition: all 400ms ease-in-out; 
-ms-transition: all 400ms ease-in-out; 
} 
ul.rig li img:hover { 
opacity: 0.7; 
} 
ul.rig li h2 { 
color: #222; 
font-weight: bold; 
font: 14px Oswald; 
line-height: 12px; 
text-shadow: 2px 3px 4px #fff; 
margin-bottom: 0px; 
margin-top: 4px; 
padding: 2px; 
text-align: center; 
} 
ul.rig li h2:hover { 
color: #0470d9; 
}

i have added an image of what is happening and what i want to accomplish please have look at the second image,i think this will make it clear what i want to acomplish

來源

2016-04-17 Loke Cool

兩個解決方案： 1）添加更多長期paragaph 2）設置最小高度（您bigest paragrpah的高度，所以每個部分都將是相同的）

來源

2016-04-17 02:24:20

我可以使用箱子大小來設置每個箱子的高度相同嗎？ –

gogle Flex的，也 http://clearleft.com/thinks/270 這將幫助你還是給我們完整的代碼上jsfidle或codepen ..和之後我們將幫助您 –

好Flexbox的是解決方案，我 –

一個解決方案將是在CSS中使用max-height上rig類。

.rig li { 
    max-height: 200px; 
}

希望它可以幫助

現在

來源

2016-04-17 02:06:21 JazZ

你能否看看我發佈的第二張圖片。 –

比使用**最小高度**。 – JazZ

如何修復這個網格的高度？

回答

相關問題