跪求 专家解决 CSS 编写 块 同行显示的 有关问题
日期：2014-05-17 浏览次数：20770 次
跪求 专家解决 CSS 编写 块 同行显示的 问题!
问题如下:
1个大的DIV 内 镶嵌12个小DIV ,要求每行显示4个,左边2个,右边2个,3行显示完毕!
要求:纯CSS 不用JS代码,不用 position 定位代码,margin可以使用,但不可以用负值!
最好能用FLOAT 浮动能解决问题!
代码如下;可以修改
------解决方案--------------------
问题如下:
1个大的DIV 内 镶嵌12个小DIV ,要求每行显示4个,左边2个,右边2个,3行显示完毕!
要求:纯CSS 不用JS代码,不用 position 定位代码,margin可以使用,但不可以用负值!
最好能用FLOAT 浮动能解决问题!
代码如下;可以修改
- CSS code
<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>
------解决方案--------------------
- HTML code
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
