How to make the next block on html so that the pictures are nearby, and the text below after each picture, i.e. the block should look the same as on the photo, only the block should be composed as a div, not like a table.

enter image description here

  • ie you yourself did not try to do something? - Arsen
  • Tried, but I can't make text blocks - Demon

3 answers 3

As an example, you can do it, although it is desirable to know what kind of pictures you will have .... and some details

.wrapp,.wrapp ul{ width: 100%; display: inline-block; margin: 0; padding: 0; } .wrapp ul li{ list-style:none; float:left; width:15%; margin:0px 10px 0px 0px; } .imagesBox{ width:100%; text-align:center; } .imagesBox img{ width:100px; height:100px; } .wrapp ul li p{ text-align:center; } 
 <div class="wrapp"> <ul> <li> <div class="imagesBox"><img src="http://vprazdnik-perm.ru/upload/shop/pos/790_s.jpg"></div> <p>Lorem Ipsum - это текст-"рыба" </p> </li> <li> <div class="imagesBox"><img src="http://vprazdnik-perm.ru/upload/shop/pos/790_s.jpg"></div> <p>Lorem Ipsum - это текст-"рыба" </p> </li> <li> <div class="imagesBox"><img src="http://vprazdnik-perm.ru/upload/shop/pos/790_s.jpg"></div> <p>Lorem Ipsum - это текст-"рыба" </p> </li> <li> <div class="imagesBox"><img src="http://vprazdnik-perm.ru/upload/shop/pos/790_s.jpg"></div> <p>Lorem Ipsum - это текст-"рыба" </p> </li> <li> <div class="imagesBox"><img src="http://vprazdnik-perm.ru/upload/shop/pos/790_s.jpg"></div> <p>Lorem Ipsum - это текст-"рыба" </p> </li> <li> <div class="imagesBox"><img src="http://vprazdnik-perm.ru/upload/shop/pos/790_s.jpg"></div> <p>Lorem Ipsum - это текст-"рыба" </p> </li> </ul> </div>

  • This is not a universal solution, I need a more universal solution, let us assume that the solution is suitable for those cases when the height and width of the pictures will be larger or smaller, and not dependent on the number of images. in this case, if the image becomes smaller or the width with the height of the images is larger, then this solution will not work. How to make indent between images for other similar blocks without creating additional classes? - Demon

Here sketched: https://jsfiddle.net/g1fx8zxk/

Source:

 .present { display: inline-block; margin-left: 20px; } .present>img { border-radius: 100%; width: 100px; height: 100px; border: 4px solid #fff; box-shadow: #aaa 0 0 10px 2px; display: block; } .present>span { display: block; text-align: center; margin-top: 10px; } /* Бонус: раскоментируйте для выравнивания по центру .centered { text-align: center; }*/ 
 <div class="centered"> <div class="present"> <img src="http://img.thrfun.com/img/075/082/large_willow_tree_ts1.jpg" /> <span>Дерево</span> </div> <div class="present"> <img src="http://img.thrfun.com/img/075/082/large_willow_tree_ts1.jpg" /> <span>Дерево</span> </div> </div>`

And now the question: is it really so difficult?

  • one
    Soon the guys will throw off links to psd files with a request to open the project and share a link to the github :) - YozhEzhi

Use Flexbox Boxes (CSS Flexible Box Layout Module). Here is a soooo modest example:

 .wrapp{display:flex} .imagesBox{width:25%;text-align:center} .imagesBox img{ width:100%; border-radius:100px;width: 80%; border-radius: 50%; border: 3px solid #fff; box-shadow: 1px 2px 2px 1px rgba(0,0,0,0.5); } 
 <div class="wrapp"> <div class="imagesBox"> <img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3058.jpg"> <p>НЕ ПИТЬ</p> </div> <div class="imagesBox"> <img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3058_1.jpg"> <p>ПИТЬ</p> </div> <div class="imagesBox"> <img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3058.jpg"> <p>НЕ ПИТЬ</p> </div> <div class="imagesBox"> <img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3058_1.jpg"> <p>ПИТЬ</p> </div> </div>

If you are looking for universal solutions, look towards the css-frameworks - bootstrap and read a lot more here .