Question

用纯DIV+CSS做一个两行两列的表格，但第二列中两行是合并的,如下面这样

<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
用ul,li的方法写呀

Answer 1

上面为效果图，用ul、li的方法详细写法：

css代码：

.demoBox {

width:204px;

}

.demoBox li {

float: left;

width:100px;

border: 1px solid #999;

}

.demoBox li.demoLi {

width: 202px;

}

html代码：

<ul class="demoBox">

<li>1</li>

<li>2</li>

<li class="demoLi">3</li>

</ul>

总体思路就是利用宽度和浮动来实现，给ul一个固定的宽度，第一行显示的li平分这个宽度，后面的li因为没有位置就自动去了第二行，让它独占一行，就可以实现这个效果。

以上，希望对你有帮助。

Answer 2

<div style="border:solid 1px #000; width:200px; height:100px;">
<div style="float:left; width:50%; height:100px;">
<div style="width:100%;height:50%;">左1行</div>
<div style="width:100%;height:50%;">左2行</div>
</div>
<div style="float:left; width:50%; height:100px; ">右全部</div>
</div>

追问

那要是用UL和LI要怎么做呢，

追答

没必要，用ul li反而麻烦

追问

那再问您一下，如果做单页的话，是用table好呢，还是用CSS好呢

追答

看情况吧，一般格式比较固定的直接用table就好了，如果是设计网站首页这些还是div比较好。个人没怎么总结过

追问

恩，谢谢

Answer 3

这是我写的源代码，你看下，并共享给其他网友，主要用到了display:inline-block;

<style type="text/css" >
body{ margin:0; padding:0; background-image :url("放大镜.png"); background-attachment :fixed ; background-position :bottom right ; background-repeat :no-repeat ;}
.tab{ width:500px ; border:0px solid black; position:relative ; left:100px; top:100px; }
.tab ul{ width:500px ;height:50px; border-bottom:0px solid red; list-style:none; overflow:hidden ; display:block ; clear:both ; margin:0; padding:0;}
.tab ul li{ width:100px; height:50px; float:left; border-right:0px solid Blue;}
.he{ }
</style>

<div class="tab">
<ul style="float:left; height:100px; width:200px; display:inline;">
<li style="float:left; width:200px; height:100px; background-color :Aqua ; "></li>
</ul>
<ul style=" height:100px; width:200px; display:inline ; margin:0; padding:0;">
<li style=" width:200px; background-color :Black ; display:inline ; "> </li>
<li style="float:left; width:200px; background-color:Fuchsia ; display:inline ;"> </li>
</ul >
<ul style=" width:100px; display:inline-block ; height:100px; margin:0; padding:0;">
<li style=" background-color :Green ; width:30px; height:100px;"></li>
<li style=" background-color :Lime ; width:40px; height:100px;"></li>
<li style=" background-color :Green ; width:30px; height:100px;"></li>
</ul >
</div>

我的思路就是这样
顺便写了代码，给其他网友以帮助。

还有给点建议，合并行使用这个<ul><li>好，还是只用<div>全部是都是<div>好啊，谢谢了

以后做网站布局用得着<ul><li>吗？