怎么用div实现以下表格的布局
日期：2014-05-17 浏览次数：20783 次
如何用div实现以下表格的布局。
<table>
<tr>
<td> </td>
<td rowspan= "2 " vlign= "center "> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
--------------------
<div>
<div style= "float:left;width:47.5%; ">
<div class= "typetitle "> <strong> Object List: </strong> </div>
<div> <textarea name= "textarea "> </textarea> </div>
</div>
<div style= "float:left;width:5%;height:380px; verticalalign:middle;line-height:380px "> <img src= "images/zh-CN/btn_right.gif "> <img src= "images/zh-CN/btn_left.gif "> </div>
<div>
<div class= "typetitle "> <strong> Object List: </strong> </div>
<div> <textarea name= "textarea "> </textarea> </div>
</div>
</div>
---------------------------------------------
上面的html并没用满足我的需要，中间列无法垂直居中。
不知道什么原有，请各位给点建议，谢谢。
------解决方案--------------------
-----------------html部分------------------
<html>
<head>
<title> </title>
<link rel= "stylesheet " href= "table.css " type= "text/css ">
</head>
<body>
<div id= "container ">
<div id= "container1 ">
<div id= "td1 ">
</div>
<div id= "td2 ">
</div>
</div>
<div id= "container2 ">
</div>
<div id= "container3 ">
<div id= "td3 ">
</div>
<div id= "td4 ">
</div>
</div>
</div>
</body>
</html>
-----------------css部分---------------
body
{
text-align:center;
}
#container
{
position:relative;
width:80%;
height:500; //可根据需要调整
text-align:center;
border:1px solid blue;
}
#container1
{
position:absolute;
top:0;
left:0;
width:30%;
height:100%;
border:1px solid #ff0000;
}
#td1
{
width:100%;
height:50%;
}
#td2
{
margin:3px 0 0 0;
width:100%;
border-top:1px solid #ff0000;
}
#container2
{
margin:3px auto;
width:308px;
height:100%;
border:1px solid #ff0000;
}
#container3
{
position:absolute;
margin:2px auto;
top:0;
right:0;
width:30%;
height:100%;
border:1px solid #ff0000;
}
#td3
{
width:100%;
height:50%;
border-bottom:
}
#td4
{
margin:3px 0 0 0;
width:100%;
border-top:1px solid #ff0000;
}
------解决方案--------------------
<table width= "200 " border= "1 ">
<tr>
<td height= "135 "> </td>
<table>
<tr>
<td> </td>
<td rowspan= "2 " vlign= "center "> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
--------------------
<div>
<div style= "float:left;width:47.5%; ">
<div class= "typetitle "> <strong> Object List: </strong> </div>
<div> <textarea name= "textarea "> </textarea> </div>
</div>
<div style= "float:left;width:5%;height:380px; verticalalign:middle;line-height:380px "> <img src= "images/zh-CN/btn_right.gif "> <img src= "images/zh-CN/btn_left.gif "> </div>
<div>
<div class= "typetitle "> <strong> Object List: </strong> </div>
<div> <textarea name= "textarea "> </textarea> </div>
</div>
</div>
---------------------------------------------
上面的html并没用满足我的需要，中间列无法垂直居中。
不知道什么原有，请各位给点建议，谢谢。
------解决方案--------------------
-----------------html部分------------------
<html>
<head>
<title> </title>
<link rel= "stylesheet " href= "table.css " type= "text/css ">
</head>
<body>
<div id= "container ">
<div id= "container1 ">
<div id= "td1 ">
</div>
<div id= "td2 ">
</div>
</div>
<div id= "container2 ">
</div>
<div id= "container3 ">
<div id= "td3 ">
</div>
<div id= "td4 ">
</div>
</div>
</div>
</body>
</html>
-----------------css部分---------------
body
{
text-align:center;
}
#container
{
position:relative;
width:80%;
height:500; //可根据需要调整
text-align:center;
border:1px solid blue;
}
#container1
{
position:absolute;
top:0;
left:0;
width:30%;
height:100%;
border:1px solid #ff0000;
}
#td1
{
width:100%;
height:50%;
}
#td2
{
margin:3px 0 0 0;
width:100%;
border-top:1px solid #ff0000;
}
#container2
{
margin:3px auto;
width:308px;
height:100%;
border:1px solid #ff0000;
}
#container3
{
position:absolute;
margin:2px auto;
top:0;
right:0;
width:30%;
height:100%;
border:1px solid #ff0000;
}
#td3
{
width:100%;
height:50%;
border-bottom:
}
#td4
{
margin:3px 0 0 0;
width:100%;
border-top:1px solid #ff0000;
}
------解决方案--------------------
<table width= "200 " border= "1 ">
<tr>
<td height= "135 "> </td>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
