跪求 专家解决 CSS 编写 块 同行显示的 问题!
问题如下:
1个大的DIV 内 镶嵌12个小DIV ,要求每行显示4个,左边2个,右边2个,3行显示完毕!
要求:纯CSS 不用JS代码,不用 position 定位代码,margin可以使用,但不可以用负值!
最好能用FLOAT 浮动能解决问题!
代码如下;可以修改
<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>
<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>
