div+css 3列(左右定宽,中间自适应)
3个回答
展开全部
这个是最好的！
其实明白原理就简单了，3个div，左边的向左浮动，右边的向右浮动，中间的默认就好了，很简单，这样就可以设计自己的页面了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>3列布局</title>
<style type="text/css">
body {
font-family: Verdana, Arial;
margin: 0;
font-size: 12px;
}
#dyhead {
margin-bottom: 10px;
}
#dyleft {
float: left;
width: 200px;
}
#dycenter {
margin: 0 210px;
}
#dyright {
float: right;
width: 200px;
}
#dyfoot {
margin-top: 10px;
clear: both;
}
div {
background-color: #eee;
border: dotted 1px green;
}
</style>
</head>
<body>
<div id="dyhead">头部（3列布局，左右两栏宽度固定，中间栏自适应宽度）</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<!--注意这里，中间3列的div的顺序不是“左中右”，而“左右中”,中间一列写在最后-->
<div id="dyfoot">底部</div>
</body>
</html>
其实明白原理就简单了，3个div，左边的向左浮动，右边的向右浮动，中间的默认就好了，很简单，这样就可以设计自己的页面了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>3列布局</title>
<style type="text/css">
body {
font-family: Verdana, Arial;
margin: 0;
font-size: 12px;
}
#dyhead {
margin-bottom: 10px;
}
#dyleft {
float: left;
width: 200px;
}
#dycenter {
margin: 0 210px;
}
#dyright {
float: right;
width: 200px;
}
#dyfoot {
margin-top: 10px;
clear: both;
}
div {
background-color: #eee;
border: dotted 1px green;
}
</style>
</head>
<body>
<div id="dyhead">头部（3列布局，左右两栏宽度固定，中间栏自适应宽度）</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<!--注意这里，中间3列的div的顺序不是“左中右”，而“左右中”,中间一列写在最后-->
<div id="dyfoot">底部</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
.left {
background-color:black;
width:100px;
height: 124px;
position:absolute;
top:0px;
left:0px;
}
.center {
background-color:red;
height: 124px;
margin-left:100px;
margin-right:100px;
top:0px;
}
.right {
background-color:gray;
height: 124px;
width: 100px;
position:absolute;
right:0px;
top:0px;
}
body, html {
margin: 0px;
border: 0px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
试下行不行
.left {
background-color:black;
width:100px;
height: 124px;
position:absolute;
top:0px;
left:0px;
}
.center {
background-color:red;
height: 124px;
margin-left:100px;
margin-right:100px;
top:0px;
}
.right {
background-color:gray;
height: 124px;
width: 100px;
position:absolute;
right:0px;
top:0px;
}
body, html {
margin: 0px;
border: 0px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
试下行不行
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>dzz10.com-用户注册</title>
<style type="text/css">
.left, .right, .center
{
width: 100%;
height: 100%;
}
.left
{
background-color: #00ff00;
}
.right
{
background-color: #00ffff;
}
.center
{
background-color: #ff0000;
}
</style>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 200px;">
<div class="left">
</div>
</td>
<td>
<div class="center">
</div>
</td>
<td style="width: 200px;">
<div class="right">
</div>
</td>
</tr>
</table>
</body>
</html>
试试看
<head runat="server">
<title>dzz10.com-用户注册</title>
<style type="text/css">
.left, .right, .center
{
width: 100%;
height: 100%;
}
.left
{
background-color: #00ff00;
}
.right
{
background-color: #00ffff;
}
.center
{
background-color: #ff0000;
}
</style>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 200px;">
<div class="left">
</div>
</td>
<td>
<div class="center">
</div>
</td>
<td style="width: 200px;">
<div class="right">
</div>
</td>
</tr>
</table>
</body>
</html>
试试看
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
