problem description
as shown in the figure, multiple div are arranged horizontally, and one of the div contents is empty. Why are other div pushed below (float or flex layout is set but not)
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
html:
<div class="container">
<div style="background: -sharpfff;"></div>
<div style="background: -sharpeee"></div>
<div style="background: -sharpddd"></div>
<div style="background: -sharpccc"></div>
</div>css:
.container{
width: 1000px;
height: 200px;
margin: 20px auto;
background: -sharpff0;
box-sizing: border-box;
}
.container div{
height: 200px;
line-height: 200px;
margin: 0;
padding: 0;
border-width: 0;
width: 20%;
display: inline-block;
box-sizing: border-box;
}