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

html-css063

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

你的意思是不是第二行要分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>

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

外面一个大框 大框上边和左边的线为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>

你的这个写错了的应该给里面的div标签加 main的 不然 你的style 对div 不起作用

下面的才是正确的写法 你只要给下面加一个 main 就行了

<div main>

<div class="left">text</div>

<div class="middle">text</div>

<div class="right">text</div>

</div>