Adaptive DIV figure 2 end product line left aligned-CodePudding

 & lt; Style type="text/CSS" & gt; 
The pro {width: 100%} 
The pro div {
width: 200px; 
height: 200px; 
Background - color: # F00; 
float: left; 
The text - align: center; 
Margin: 5 px; 
} 
</style>

 & lt; Div & gt; 
 1
 
 2
 
 3
 
 4 & lt;/div> 
 5 & lt;/div> 
.

Pro, window size change width around inside the DIV align 2 end, dissatisfaction with the last line should be left aligned, trouble expert guidance, thank you

Online to find a lot of methods, the last line spacing is not correct

CodePudding user response:

Do away with telescopic box, and behind the content div plus a few empty div for the height of the placeholder 0

 & lt; ! Doctype html> 
 
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge, chrome=1"/& gt; 
<meta charset="utf-8" & gt; 
  
<style type="text/CSS" & gt; 
Body {
margin: 0; 
} 
The pro {
width:100%; 
Display: flex; 
The flex - wrap: wrap; 
justify-content: space-around; 
} 
The pro div {
width: 200px; 
height: 200px; 
Background - color: # F00; 
The text - align: center; 
Margin: 5 px; 
} 
. The pro div. The placeholder {
margin-top: 0px; 
Margin - bottom: 0 px; 
Height: 0 px; 
} 
</style> 
 
<body> 

 1
 
 2
 
 3
 
 4 & lt;/div> 
 5 & lt;/div> 
 6 & lt;/div> 
 7 & lt;/div> 
 8 & lt;/div> 
 9 & lt;/div> 
 10 & lt;/div> 
 11 & lt;/div> 
 12 & lt;/div> 
 13 & lt;/div> 
 14 & lt;/div> 
 15 & lt;/div>