首页 >web前端 >html教程 >跪求 专家解决 CSS 编写 块 同行显示的 问题!_html/css_WEB-ITnose

跪求 专家解决 CSS 编写 块 同行显示的 问题!_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:12:521064浏览

问题如下:
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>

谢谢! 解决问题!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn