Rumah > hujung hadapan web > html tutorial > 跪求 专家解决 CSS 编写 块 同行显示的 问题!_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 12:12:52
asal
1097 orang telah melayarinya

问题如下:
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>
Salin selepas log masuk


回复讨论(解决方案)

上边的高 宽 尺寸不能变哦 !

<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>
Salin selepas log masuk

谢谢! 解决问题!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan