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
<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.