css三行三列布局第二行部分分成三列，怎么写css

html-css036

css三行三列布局第二行部分分成三列，怎么写css,第1张

.line{width:800pxmargin:0px autoclear:both}

.line_left{float:leftwidth:250pxheight:200px}

.line_middle{float:leftwidth:300pxheight:200px}

.line_right{float:rightwidth:250pxheight:200px}

</style>

<div class="line" id="line1" >

<div class="line_left" >第一行第一列</div>

<div class="line_left" >第一行第二列</div>

<div class="line_right" >第一行第三列</div>

</div>

<div class="line" id="line2" >

<div class="line_left" >第二行第一列</div>

<div class="line_left" >第二行第二列</div>

<div class="line_right" >第二行第三列</div>

</div>

<div class="line" id="line3" >

<div class="line_left" >第三行第一列</div>

<div class="line_left" >第三行第二列</div>

<div class="line_right" >第三行第三列</div>

</div>

外面一个大框 大框上边和左边的线为1px黑色

大框里面写<ul><li>三行三列共9个<li>紧密排列好。宽高都设定一样。一定和外大框配合好。每个<li>敲定属性为右边和下边1px黑色.只要你把握好比例就可以实现。

不知道你能不能弄明白，如果不行的话，请Hi我，祝你好运。

<div id="">

<ul>

<li></li><li></li><li></li>

<li></li><li></li><li></li>

<li></li><li></li><li></li>

</ul>

</div>

你的意思是不是第二行要分3列？，这样的话最好第二行3个浮动框外面套一个盒子，如下面这样：

css代码：

#container{ width:960pxmargin:0 auto}

#head,#foot{ height:100pxbackground-color:red}

#main{ margin:10px 0overflow:hidden}

#left{ float:leftwidth:200pxheight:400pxbackground-color:green}

#content{ float:leftwidth:440pxmargin:0 10pxheight:400pxbackground-color:pink}

#right{ float:leftwidth:300pxheight:400pxbackground-color:green}

html代码:

<div id="container">

<div id="head"></div>

<div id="main">

<div id="left"></div>

<div id="content"></div>

<div id="right"></div>

</div>

<div id="foot"></div>

</div>

背景颜色和高度是测试用的，具体写的时候可以去掉