CSS float function for multiple image does not work. (vertical line of image and test is inconsistent)

Question

I tried to make several lines of containers, each container has image and text. to do this, I used {float:left} function , but the left side of the images is not vertically consistent to each other like below.

image link:the used codes

image link:the result of the codes

I want to make this like :

(red box) Hello

(blue box) My name is

(green box) Story

(purple box) Song

Please give some advices.

HamiD · Answer 1 · 2020-11-18T12:42:07.307

0

put your all elements in a div and add display:flex to your new-div item:

<div class="parent">
  <div>
   <div>Hello1</div>
   <div>my Name is</div> 
  </div>
  <div>
   <div>Hello2</div>
   <div>my Name is</div> 
  </div>
</div>

style:

.parent{display:flex;}

edited Nov 18 '20 at 12:42

answered Nov 18 '20 at 09:36

HamiD

786
4
19

I added {display:flex;} in class ".center_item" , but the problem of showing like step-down shaped image group is still existing. (red box) Hello (blue box) My name is (green box) Story (purple box) Song – Paul Nov 18 '20 at 12:16
you need to put the text with its box in one div like: (updated my code) – HamiD Nov 18 '20 at 12:42
it means you should have four divs in the parent div now. – HamiD Nov 18 '20 at 12:44
thank you, also I used " clearfix " to solve the problem. It works well. – Paul Nov 18 '20 at 14:26
welcom, anytime :) – HamiD Nov 18 '20 at 14:45

CSS float function for multiple image does not work. (vertical line of image and test is inconsistent)

1 Answers1