It is necessary to make so that, depending on the screen resolution, the blocks (can be of different heights depending on the content) are lined up in neat rows all the time one after another, and do not crawl onto each other as now. Remove float does not help.

 .member { display:inline-block; width:160px; font-size:14px; float: left; } 
 <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание бла-бла-бла бла-бла-бла</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание бла-бла-бла</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание бла-бла-бла-бла-бла-бла</p> <p>телефон</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <a href="mailto:email">email</a> </div>

    2 answers 2

    The width of the member should be exactly the width of the image. And based on how many blocks you should have in the 1st row, write the width of the parent block. For example. You want the member blocks to be 5 pieces in a row. This means that the width of each member is set to 200 pixels. And the width of the parent element is set to 1000 pixels + to it (the parent element) write a margin: 0 auto

    • no, no, the site should adapt for different permissions - I wrote about this in the description, so no task for the width of the parent element. and what makes you think that the width of a member should be exactly the width of the images - not at all. see the correct answer above - everything is right there - Vasya

    The solution is here.

     .member { display: inline-block; width: 160px; font-size: 14px; vertical-align: top; } 
     <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание бла-бла-бла бла-бла-бла</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание бла-бла-бла</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание бла-бла-бла-бла-бла-бла</p> <p>телефон</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <p>факс</p> <a href="mailto:email">email</a> </div> <div class="member"> <img src="http://placehold.it/150x188"> <h4>Заголовок</h4> <p>Описание</p> <p>телефон</p> <a href="mailto:email">email</a> </div>