F
F
freeman02042015-08-17 16:22:45
css
freeman0204, 2015-08-17 16:22:45

4 pictures with text. How to properly align?

You need to lay out the block as in the first picture. I made it up. But as soon as I do padding: 0 20px 25px 0; bottom indent 25px immediately there is a ladder shift. How to get rid of it? Is there any other way to implement this block? 3489ef3a1370435d8f26e61355310295.png7b1976732bbf4d32847567e9d0f20cf2.png
I took this as an example. In fact, the block should be like in the picture on the right.2cb2a7ebf04347758526693c71db391e.png

img {
  float: left;
  padding: 0 20px 25px 0;
}

<img src="http://lorempixel.com/44/44/sports" alt="">
  <div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>

  <img src="http://lorempixel.com/44/44/sports" alt="">
  <div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>

  <img src="http://lorempixel.com/44/44/sports" alt="">
  <div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>

  <img src="http://lorempixel.com/44/44/sports" alt="">
  <div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
rhost, 2015-08-17
@freeman0204

codepen.io/anon/pen/bdyWba

A
Alex, 2015-08-17
@isqua

Wrap the picture and the text that relates to it in one block.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question