There is such a block

screenshot

As you can see, the title and the title clearly follow each other. I'm trying to make it like this

.advantages{ float:left; width:570px; } .advantages_icon-eye{ display:block; float:left; width:31px; height:20px; background-color:red; } .advantages_icon-brush{ display:block; float:left; width:31px; height:31px; background-color:green; } .advantages_icon-heart{ display:block; float:left; width:31px; height:27px; background-color:blue; } .advantages_name{ text-transform: uppercase;; color:#000; font-weight:bold; } 
  <div class="advantages"> <div class="advantages__item"> <span class="advantages_icon-eye"></span> <div class="advantages_name clearfix"> 1. Lorem ipsum </div> <div class="advantages_description">Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</div> </div> <div class="advantages__item"> <span class="advantages_icon-brush"></span> <div class="advantages_name clearfix"> 2. Lorem ipsum </div> <div class="advantages_description">Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</div> </div> <div class="advantages__item"> <span class="advantages_icon-heart"></span> <div class="advantages_name clearfix"> 3. Lorem ipsum </div> <div class="advantages_description">Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</div> </div> </div>

But in my version I need to increase the height of each icon in order to move the text so that it stands up normally. Is this correct and if not, how else?

PS flex does not offer))) I still want to comprehend float

    3 answers 3

    1. In your case, the comprehension of float leads to obscurantism and a bad result. What you do is wrong in terms of approach.
    2. Comprehending flex will be easier, understanding what is happening is better, and the result is better.
    3. In your case, flex is also not needed. I would have made the padding-left of .advantages__item blocks, and arranged the icons in the form of background images or with absolute positioning. And you can even make up the table, if you really want to learn the antique technology.

       ul, li, h2, p { margin: 0; padding: 0; } ul { width: 570px; margin: auto; list-style: none; } i { float: left; width: 2rem; height: 2rem; background: blue; border-radius: 50%; } h2, p { margin-left: 2.5rem; } li:hover { background: silver; } 
       <ul> <li> <i></i> <h2>1. Lorem ipsum</h2> <p>Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</p> </li> <li> <i></i> <h2>1. Lorem ipsum</h2> <p>Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</p> </li> <li> <i></i> <h2>1. Lorem ipsum</h2> <p>Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</p> </li> </ul>

        Recently answered a similar question , that’s just one to one.

        float solution

         .ul-li > .li { display: block; width: 100%; margin-bottom: 7%; } .ul-li > .li::after { content: ''; display: block; clear: both; } .ul-li > .li img, .ul-li > .li .text { display: inline-block; float: left; } .ul-li > .li img { width: 40px; height: 40px; } .ul-li > .li .text { width: calc(92% - 40px); margin-left: 8%; } .ul-li > .li .text h4 { margin-top: 0; } 
         <div class="ul-li"> <div class="li"> <img src="https://i.stack.imgur.com/IhysK.png" alt=""> <div class="text"> <h4>Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p> </div> </div> <div class="li"> <img src="https://i.stack.imgur.com/IhysK.png" alt=""> <div class="text"> <h4>Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p> </div> </div> </div>