61,115
社区成员
发帖
与我相关
我的任务
分享CSS布局问题
我在写一个页面,结构是:
<div>head</div>
<div>body</div>
--|<div>left</div>
|<div>right</div>
<div>footer</div>
当我设置主体(body)部分的左右(left、right)两个分栏时，出现问题：left与right出现了错位空挡，我本来希望他们左右并列的，但这两列却上下错开，不知道为什么。
下面是我的 CSS 代码，请各位高手大哥帮忙看看问题在哪里？
谢谢：）
css样式部分：
<style type="text/css">
<!--
#header {
padding: 0px;
width: 80%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
left:10%;
right:10%;
top: 1%;
bottom: 25%;
}
#center {
padding: 0px;
margin:0;
width: 80%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
left:10%;
right:10%;
top:25%;
bottom: 78%;
}
#footer {
padding: 0px;
width: 80%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
left:10%;
right:10%;
top:78%;
bottom: 100%;
}
#left{
background-color:#cccccc;
width:50%;
height:auto;
position: relative;
top:0%;
left: 0%;
right: 50%;
bottom: 100%;
margin: 0px;
}
#right{
background-color:#cccccc;
width:50%;
height:auto;
position: relative;
top:0%;
left: 50%;
right: 0%;
bottom: 100%;
margin: 0px;
}
-->
</style>
网页主体部分：
<body>
<!-- 头部 -->
<div id="header">
<div>页头</div>
<div>导航</div>
<div>广告</div>
</div>
<!-- 网页中间部分，包括左、右两个分栏 -->
<div id="center">
<div id="left">
<div>宗旨</div>
<div>最新动态</div>
<div>客服</div>
</div>
<div id="right">
<div>服务范围</div>
<div>下载</div>
<div>产品区</div>
</div>
</div>
<!-- 页尾 -->
<div id="footer">footer
<div></div>
</div>
</body>
<div>head</div>
<div>body</div>
--|<div>left</div>
|<div>right</div>
<div>footer</div>
当我设置主体(body)部分的左右(left、right)两个分栏时，出现问题：left与right出现了错位空挡，我本来希望他们左右并列的，但这两列却上下错开，不知道为什么。
下面是我的 CSS 代码，请各位高手大哥帮忙看看问题在哪里？
谢谢：）
css样式部分：
<style type="text/css">
<!--
#header {
padding: 0px;
width: 80%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
left:10%;
right:10%;
top: 1%;
bottom: 25%;
}
#center {
padding: 0px;
margin:0;
width: 80%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
left:10%;
right:10%;
top:25%;
bottom: 78%;
}
#footer {
padding: 0px;
width: 80%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
left:10%;
right:10%;
top:78%;
bottom: 100%;
}
#left{
background-color:#cccccc;
width:50%;
height:auto;
position: relative;
top:0%;
left: 0%;
right: 50%;
bottom: 100%;
margin: 0px;
}
#right{
background-color:#cccccc;
width:50%;
height:auto;
position: relative;
top:0%;
left: 50%;
right: 0%;
bottom: 100%;
margin: 0px;
}
-->
</style>
网页主体部分：
<body>
<!-- 头部 -->
<div id="header">
<div>页头</div>
<div>导航</div>
<div>广告</div>
</div>
<!-- 网页中间部分，包括左、右两个分栏 -->
<div id="center">
<div id="left">
<div>宗旨</div>
<div>最新动态</div>
<div>客服</div>
</div>
<div id="right">
<div>服务范围</div>
<div>下载</div>
<div>产品区</div>
</div>
</div>
<!-- 页尾 -->
<div id="footer">footer
<div></div>
</div>
</body>
...全文
请发表友善的回复…
发表回复
cyyjm 2007-05-10
- 打赏
- 举报
<!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" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#header {
padding: 0px;
width: 80%;
border-style: none;
position: relative;
height: auto;
}
#center {
padding: 0px;
margin:0;
width: 80%;
border-style: none;
height: auto;
}
#footer {
padding: 0px;
width: 80%;
border-style: none;
position: relative;
height: auto;
clear:both;
float:left
}
#left{
background-color:#cccccc;
width:50%;
height:auto;
float:left;
top:0%;
left: 0%;
right: 50%;
bottom: 100%;
margin: 0px;
}
#right{
background-color:#cccccc;
width:50%;
height:auto;
float:left;
top:0%;
left: 50%;
right: 0%;
bottom: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<!-- 头部 -->
<div id="header">
<div>页头</div>
<div>导航</div>
<div>广告</div>
</div>
<!-- 网页中间部分，包括左、右两个分栏 -->
<div id="center">
<div id="left">
<div>宗旨</div>
<div>最新动态</div>
<div>客服</div>
</div>
<div id="right">
<div>服务范围</div>
<div>下载</div>
<div>产品区</div>
</div>
</div>
<!-- 页尾 -->
<div id="footer">footer
<div></div>
</div>
</body>
suxin_s 2007-05-08
- 打赏
- 举报
#right{
background-color:#cccccc;
width:50%;
height:0px;
position: absolute;
top:0px;
left: 50%;
right: 0px;
bottom: 100%;
margin: 0px;
}
background-color:#cccccc;
width:50%;
height:0px;
position: absolute;
top:0px;
left: 50%;
right: 0px;
bottom: 100%;
margin: 0px;
}
飘零雾雨 2007-05-07
- 打赏
- 举报
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
}
p {
margin: 0;
}
#dybody {
width: 80%;
margin: 25px auto;
text-align: left;
}
#center {
width: 100%;
float: left;
}
.l-r {
width: 49%;
margin: 0 1px;
background-color:#ccc;
float: left;
}
#footer {
margin: 0 auto;
clear: both;
}
</style>
<body>
<div id="dybody">
<p>页头</p>
<p>导航</p>
<p>广告</p>
<div id="center">
<div class="l-r">
<p>宗旨</p>
<p>最新动态</p>
<p>客服</p>
</div>
<div class="l-r">
<p>服务范围</p>
<p>下载</p>
<p>产品区</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
body {
margin: 0;
padding: 0;
text-align: center;
}
p {
margin: 0;
}
#dybody {
width: 80%;
margin: 25px auto;
text-align: left;
}
#center {
width: 100%;
float: left;
}
.l-r {
width: 49%;
margin: 0 1px;
background-color:#ccc;
float: left;
}
#footer {
margin: 0 auto;
clear: both;
}
</style>
<body>
<div id="dybody">
<p>页头</p>
<p>导航</p>
<p>广告</p>
<div id="center">
<div class="l-r">
<p>宗旨</p>
<p>最新动态</p>
<p>客服</p>
</div>
<div class="l-r">
<p>服务范围</p>
<p>下载</p>
<p>产品区</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
