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

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

WBOY
WBOYOriginal
2016-06-24 12:12:521002Durchsuche

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

谢谢! 解决问题!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn