Как иметь разделы изображения и текста в отзывчивом дизайне?

Question

Я использую следующий css, чтобы иметь 8 разделов текста и изображения. Мне нужно зафиксировать размер ящиков. Однако, исходя из текущего дизайна, размер ящиков основан на их содержании, поэтому, если ящик имеет короткий контент, он будет меньше, чем ящик с более длинным контентом.

CSS

.test{ 
    min-width:80%; 
    max-width:80%; 
    margin: 0 auto; 
} 


.test ul { 
    text-align:center; 
} 

.test ul li{ 
    box-sizing: border-box; 
    text-align:left; 
    list-style:none; 
    display:inline-block; 
    vertical-align:top; 
    width: 23%; 
    min-height: 240px; 
    border: 1px solid orange ; 
    border-radius: 5px; 
    padding:1%; 
    margin: 0.5%; 
} 

.test li p{overflow: hidden; margin: 10px;} 
.test p + p{clear: both;} 
.test li p img{float: right; margin-right:10px;} 
.test h2{margin-left: 2.2%;} 

HTML

<div class="test"> 
<h2>This is the test of 8 sections</h2> 
    <ul> 
    <li><p> 
    <img src="../img/d.jpg" width="50" height="50"/> 
    test tfdfdf dfdf<br/> 
    454 4545 45<br/> 
    32434 34234 
</p> 
<p> 
    blah blah blah Text Here <br/> See more … 
</br> 

</p></li> 
<li><p> 
    <img src="../img/d.jpg" width="50" height="50"/> 
    test tfdfdf dfdf<br/> 
    454 4545 45<br/> 
    32434 34234 
</p> 
<p> 
    blah blah blah Text Here <br/> See more … 
</br> 

</p></li> 
<li><p> 
    <img src="../img/d.jpg" width="50" height="50"/> 
    test tfdfdf dfdf<br/> 
    454 454545 215<br/> 
    32434 34234 
</p> 
<p>blah blah blah Text Here <br/> See more … 
</br> 
</p></li> 
<li><p> 
    <img src="../img/d.jpg" width="50" height="50"/> 
    test tfdfdf dfdf<br/> 
    45456 5565<br/> 
    32434 34234 
</p> 
<p>blah blah blah Text Here <br/> See more … 
</br> 

</p></li> 
<li><p> 
    <img src="../img/d.jpg" width="50" height="50"/> 
    test tfdfdf dfdf<br/> 
    454 4545 45<br/> 
    32434 34234 
</p> 
<p> 
    blah blah blah Text Here <br/> See more … 
</br> 

</p></li> 
<li><p> 
    <img src="../img/e.jpg" width="50" height="50"/> 
    Test test<br/> 
    3434 343434 34343<br/> 
    Test new Test 
</p> 
<p>blah blah blah Text Here <br/> See more … 
</br> 
</p></li> 
<li><p> 
    <img src="../img/f.jpg" width="50" height="50"/> 
    <b>fdgfg dfgg fdg</b><br/> 
    435345 435345<br/> 
    Gladstone Qld 
</p> 
<p> blah blah blah Text Here <br/>See more … 
</p> 
    </li> 
    <li><p> 
    <img src="../img/g.jpg" width="50" height="50"/> 
    Test Test is test<br/> 
    444 5444 4444<br/> 
    Test test 
</p> 
<p> 
    blah blah blah Text Here <br/> See more … 
</p> 
    </li> 
    </ul> 
    </div> <!-- test --> 

JsFiddleClick Here

Answer 1

Если вам нужно сделать высоту починки для коробки затем сделать вертикальную прокрутку для коробок с макс -гойтТаким образом, Ваше содержание не получите шкурку и коробка будет иметь фиксированную высоту Попробуйте

.test ul li{ 
max-height: 250px; 
overflow-y: scroll; 
}