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

html-css014

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

解决这个问题也不是很难，你可以考虑把此布局作为3个部分 上，中，下

中间部分用作分割左，中，右

你看看我的代码是否对你有所帮助

<style type="text/css">

#containet{width:900pxheight:500px}

#head{width:100%height:100px}

#middle{width:900pxposition:relative}

#left{position:absoluteleft:0pxtop:0pxwidth:200pxheight:200px}

#center{height:200pxmargin-left:200pxmargin-right:200px}

#right{position:absolutetop:0pxright:0pxwidth:200pxheight:200px}

#footer{width:900pxheight:200px}

</style>

</head>

<body>

<div id="containet">

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

<div id="middle">

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

<div id="center">zhong </div>

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

</div><div id="footer">xia </div>

</div>

</body>

中间部分随最外圈大小自动放大缩小

.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>