Question

div排列，左边一个框，右边四个框

我想做一个DIV+CSS的，左边一个框，右边四个框，四个框加起来的高度和左边一个框的高度一样，该如何做？CSS如下：

*{ padding:0; margin:0;}
ul,li{ list-style:none;}
img{ border:0;}
#zSlider{margin:0px auto; width:960px; overflow:hidden;}
#picshow{position:relative;}
#picshow,#picshow_img{width:640px; height:320px; overflow:hidden; float:left;}
#picshow_img li{width:640px; height:320px; overflow:hidden; float:left; display:none;}
#picshow_img img{width:640px; height:320px;}
#picshow_tx{left:0px; width:640px; bottom:0px; position:absolute; height:90px; overflow:hidden;}
#picshow_tx li{background:url(../images/picshow_bg.png) repeat; padding:10px 30px; height:70px; color:#fff; display:none;}
#picshow_tx li a{color:#fff;}
#picshow_tx li a:hover{text-decoration:underline;}
#picshow_tx li h3{ margin:13px 0;}
#picshow_tx li p{ color:#ccc; line-height:16px; height:16px; overflow:hidden;}
#select_btn{width:319px; height:71px; color:#111; float:right; background-color:#f0f0f0;}
#select_btn li{padding:9px 11px 0px 9px; width:299px; height:71px; border-top:1px solid #fff; cursor:pointer;}
#select_btn li:hover{background-color:#fff;}
#select_btn li.current{background-color:#fff;}
#select_btn li.current:hover{background-color:#fff;}
#select_btn a{color:#000;}
#select_btn img{padding:2px; border:1px solid #ccc; width:70px; height:49px; margin-right:10px; float:left;}
#select_btn .select_text{ height:40px; font:bold 13px/16px 'Microsoft YaHei'; overflow:hidden; display:block;}
#select_btn .select_text:hover{text-decoration:underline;}
#select_btn .select_date{ height:23px; line-height:15px; overflow:hidden; display:block;}

Answer 1

有时候写代码需要换一种思路，便可以简单的解决。用一个2行3列的table做，把左边的一列合并一起。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2" width="400" height="400">左边大框</td>
    <td width="200" height="200">1</td>
    <td width="200" height="200">2</td>
  </tr>
  <tr>
    <td  width="200" height="200">3</td>
    <td  width="200" height="200">4</td>
  </tr>
</table>

如果你觉得这种不好，喜欢div那你就这样写

<style type="text">
.z{height:400px;width:400px;float:left;}
.y{width:400px;height:400px;float:left;}
.y .four{width:200px; height:200px;float:left;}
</style>
<div class="z">左边大框</div>
<div class="y">
<div class="four">1</div><div class="four">2</div><div class="four">3</div><div class="four">4</div>
</div>

Answer 2

左边的大框float:left
右边的小框都float:right
全都排完之后再来个float:none

差不多就是这样，具体细节自己调整。

追问

不好意思，再问个小问题，因为是新手，麻烦再帮忙一下，就是因为我右边的是用循环内容的，现在每一个循环调出的内容高度都和左边的一样高了，能否调成四个加起来和左边的一样高？不知道为何~谢谢

追答

我也没学过css，还是折腾emlog模板时稍微接触了一点，所以你问的问题我不清楚……

或者考虑把右边内容外面再包个div看看能不能解决。
我以前都是自己瞎折腾的，如果是我我可能会考虑一个大的div再加上4个表格来定位，虽然这样很不伦不类，但感觉有时定位表格确实比层方便……