Question

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

Answer 1

解决方案是在max-height类的CSS中使用rig。

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

希望有所帮助

Answer 2

现在有两个解决方案： 1）为长paragaph添加更多阅读 2）设置最小高度（你的bigest paragrpah的高度，所以每个框都是相同的）

如何修复此网格的高度？

2 个答案: