>  기사  >  웹 프론트엔드  >  跪求 专家解决 CSS 编写 块 同行显示的 问题!_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:12:521002검색

问题如下:
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으로 문의하세요.