How can I use float-left and vertical-align top both together?

Asked Mar 08 '22 at 09:23

Active Mar 08 '22 at 09:36

Viewed 19 times

I want to use float left and vertical-align top both together.I have div of 1000px by 1000px. I want to set 7 images as I shown in picture. I want this kind of result

With this code I get this

<style>
        .container{
        border: 1px solid black;
        height: 1000px;
        width: 1000px;
     
        
        
        }
        .img{
        /* vertical-align: top; */
        display: inline-block;
        float: left;
  

        }
        </style>
   </head> 
   <body>
    <div class="container">
    <div class="img"><img src="1.jpg" alt=""></div>
    <div class="img"><img src="2.jpg" alt=""></div>
    <div class="img"><img src="3.jpg" alt=""></div>
    <div class="img"><img src="4.jpg" alt=""></div>
    <div class="img"><img src="5.jpg" alt=""></div>
    <div class="img"><img src="6.jpg" alt=""></div>
    <div class="img"><img src="7.jpg" alt=""></div>
    </div>
    </body>

I tried to use  vertical-align: top; 
    display: inline-block; both together but it didn't work.

edited Mar 08 '22 at 09:36

Paulie_D

107,962
13
142
161

asked Mar 08 '22 at 09:23

het patel

you can use grid or flexbox instead using float. – Sfili_81 Mar 08 '22 at 09:27
I will add images dynamically of different sizes. Will grid work? – het patel Mar 08 '22 at 13:13
Yes just try to code, if you get errors or problems ask here posting code – Sfili_81 Mar 08 '22 at 13:15
I tried with .container{ border: 1px solid black; height: 1000px; width: 1000px; display:grid } but still not working. – het patel Mar 08 '22 at 13:33
This question is closed, i'll suggest you to study how grid works and then try to code – Sfili_81 Mar 08 '22 at 14:05

How can I use float-left and vertical-align top both together?

0 Answers0