Begging experts to solve the problem of CSS writing blocks displayed by peers!_html/css

Begging experts to solve the problem of CSS writing blocks displayed by peers!_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:12:52

Original

1034 people have browsed it

The problem is as follows:
12 small DIVs are embedded in 1 large DIV. Each row is required to display 4, 2 on the left, 2 on the right, and 3 rows are displayed!
Requirement: Pure CSS without JS Code, do not use position positioning code, margin can be used, but negative values cannot be used!
It is best to use FLOAT to solve the problem!
The code is as follows; it can be modified

<div style="background-color:#0066CC; width:700px; height:500px"><div style="background-color:#ff66CC; width:30px; height:30px;">  1 </div><div style="background-color:#ff66CC; width:30px; height:30px;"> 2 </div><div style="background-color:#ff66CC; width:30px; height:30px;">  3 </div><div style="background-color:#ff66CC; width:30px; height:30px;"> 4 </div><div style="background-color:#ff66CC; width:30px; height:30px;"> 5 </div><div style="background-color:#ff66CC; width:30px; height:30px;">  6 </div><div style="background-color:#ff66CC; width:30px; height:30px;"> 7</div><div style="background-color:#ff66CC; width:30px; height:30px;"> 8 </div><div style="background-color:#ff66CC; width:30px; height:30px;">  9 </div><div style="background-color:#ff66CC; width:30px; height:30px;">  10 </div><div style="background-color:#ff66CC; width:30px; height:30px;">  11</div><div style="background-color:#ff66CC; width:30px; height:30px;">  12 </div></div>

Copy after login

Reply to discussion (solution)

The height and width dimensions above cannot be changed!

<div style="float:left;background-color:#0066CC; width:700px; height:500px"><div style="float:left;background-color:#ff66CC; width:30px; height:30px;">  1 </div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;"> 2 </div><div style="margin:0 0 0 580px;float:left;background-color:#ff66CC; width:30px; height:30px;">  3 </div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;"> 4 </div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;"> 5 </div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;">  6 </div><div style="margin:0 0 0 580px;float:left;background-color:#ff66CC; width:30px; height:30px;"> 7</div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;"> 8 </div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;">  9 </div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;">  10 </div><div style="margin:0 0 0 580px;float:left;background-color:#ff66CC; width:30px; height:30px;">  11</div><div style="float:left;background-color:#ff66CC; width:30px; height:30px;">  12 </div></div>

Copy after login

Thank you! Solve the problem !