div+css三列布局问题
两行+三列+一行其中的三列的最右边的一个列为什么比其他的列矮一行？（所有的浏览器中都这样显示）我的代码写错了么？试过用margin强制拉回，但是在中间的那个列里加入其它元...
两行+三列+一行
其中的三列的最右边的一个列为什么比其他的列矮一行？（所有的浏览器中都这样显示）
我的代码写错了么？
试过用margin强制拉回，但是在中间的那个列里加入其它元素之后，右边的列会跟着加入的元素而下降。
<body>
<div id="container">
<div id="header">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p></div>
<div id="nav">nav</div>
<div id="maincontent">
<div id="leftside">leftside</div>
<div id="main">main</div>
<div id="rightside">rightside</div>
</div>
</div>
<div id="footer">
<p>Powered by <a href="http://blog.fc2.com/" title="FC2 Blog">FC2 Blog</a> <%ad> <%ad2></p>
<p>Copyright © <%blog_name> All Rights Reserved.</p>
</div>
</body>
body {
margin: 0 auto;
font-size: 12px;
font-family: Verdana;
line-height: 1.5;
background-color: #000;
}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p {
padding:0; margin:0;
}
ul {
list-style:none;
}
img {
border:0px;
}
a {
color:#05a; text-decoration:none;
}
a:hover {
color:#f00;
}
/*body*/
#container {
width:1000px; margin:0 auto;
}
.title {
width: 500px;
}
/*header*/
#header {
height:150px; background:#CCFFCC; margin-bottom:0px;
}
#nav {
height:30px; background:#CCFFCC; margin-bottom:0px;
}
/*main*/
#maincontent {
margin-bottom:10px;
height: auto;
}
#leftside {
float: left;
width: 240px;
background: #FFCC99;
}
#main {
width: 500px;
background: #FFFF99;
margin-left: 250px;
}
#rightside {
float: right;
width: 240px;
background: #FFCC99;
}
/*footer*/
#footer {
display: block;
clear: both;
width: 100%;
margin: 0;
padding: 0;
background-color: rgb(34, 34, 34);
background-image: linear-gradient(hsl(0, 0%, 23%), hsl(0, 0%, 13%));
color: rgb(221, 221, 221);
font-weight: bold;
position: absolute;
text-align: center;
}
footer p {
width: 100%;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 30px;
text-align: center;
} 展开
其中的三列的最右边的一个列为什么比其他的列矮一行？（所有的浏览器中都这样显示）
我的代码写错了么？
试过用margin强制拉回，但是在中间的那个列里加入其它元素之后，右边的列会跟着加入的元素而下降。
<body>
<div id="container">
<div id="header">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p></div>
<div id="nav">nav</div>
<div id="maincontent">
<div id="leftside">leftside</div>
<div id="main">main</div>
<div id="rightside">rightside</div>
</div>
</div>
<div id="footer">
<p>Powered by <a href="http://blog.fc2.com/" title="FC2 Blog">FC2 Blog</a> <%ad> <%ad2></p>
<p>Copyright © <%blog_name> All Rights Reserved.</p>
</div>
</body>
body {
margin: 0 auto;
font-size: 12px;
font-family: Verdana;
line-height: 1.5;
background-color: #000;
}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p {
padding:0; margin:0;
}
ul {
list-style:none;
}
img {
border:0px;
}
a {
color:#05a; text-decoration:none;
}
a:hover {
color:#f00;
}
/*body*/
#container {
width:1000px; margin:0 auto;
}
.title {
width: 500px;
}
/*header*/
#header {
height:150px; background:#CCFFCC; margin-bottom:0px;
}
#nav {
height:30px; background:#CCFFCC; margin-bottom:0px;
}
/*main*/
#maincontent {
margin-bottom:10px;
height: auto;
}
#leftside {
float: left;
width: 240px;
background: #FFCC99;
}
#main {
width: 500px;
background: #FFFF99;
margin-left: 250px;
}
#rightside {
float: right;
width: 240px;
background: #FFCC99;
}
/*footer*/
#footer {
display: block;
clear: both;
width: 100%;
margin: 0;
padding: 0;
background-color: rgb(34, 34, 34);
background-image: linear-gradient(hsl(0, 0%, 23%), hsl(0, 0%, 13%));
color: rgb(221, 221, 221);
font-weight: bold;
position: absolute;
text-align: center;
}
footer p {
width: 100%;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 30px;
text-align: center;
} 展开
3个回答
展开全部
<div id="maincontent">
<div id="rightside">rightside</div>
<div id="leftside">leftside</div>
<div id="main">main</div>
</div>
这一段的位置要这么放， 有浮动的DIV 要放在最前面，个人的一点心得，希望能采纳
<div id="rightside">rightside</div>
<div id="leftside">leftside</div>
<div id="main">main</div>
</div>
这一段的位置要这么放， 有浮动的DIV 要放在最前面，个人的一点心得，希望能采纳
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
页面中加一句
<div id="maincontent" class="clearfix">
样式加一段
.clearfix:after { content: '\0020'; display: block; height: 0; clear: both; font-size: 0; visibility: hidden }
改一点
#main { width: 500px; background: #FFFF99; float:left; margin-left:10px; }
<div id="maincontent" class="clearfix">
样式加一段
.clearfix:after { content: '\0020'; display: block; height: 0; clear: both; font-size: 0; visibility: hidden }
改一点
#main { width: 500px; background: #FFFF99; float:left; margin-left:10px; }
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
像你这样的布局，用div虽然也能实现，但太麻烦，改用table吧。
div和table都可以布局，div的loading比table要快些，但table布局更直观，更简单。
div和table都可以布局，div的loading比table要快些，但table布局更直观，更简单。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
