Html 如何在响应性设计中包含图像和文本部分？

我使用下面的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 --> 

这是对8个部分的测试


测试tfdfdf

454545

32434 34234


诸如此类的文字
请参阅更多…




测试tfdfdf

454545

32434 34234


诸如此类的文字
请参阅更多…




测试tfdfdf

4545215

32434 34234

诸如此类的文字
请参阅更多…




测试tfdfdf

4565565

32434 34234

诸如此类的文字
请参阅更多…




测试tfdfdf

454545

32434 34234


诸如此类的文字
请参阅更多…




测试测试

34343

测试新测试

诸如此类的文字
请参阅更多…




fdgfg dfgg fdg

435345 435345

格拉德斯通昆士兰州

诸如此类的文字
请参阅更多…



测试就是测试

4445444444

测试


诸如此类的文字
请参阅更多…

---

jshiddle

如果需要为框设置固定高度，则为具有最大高度的框设置垂直滚动 所以，您的内容将不会被隐藏，并且框将具有固定的高度 试试看

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

---

到目前为止，所有的盒子似乎都是一样大小的。你能告诉我们这个问题吗。您可以将此笔用作测试环境@LOTUSMS。请单击问题底部的JSFiddle链接查看代码。