[英]CSS 3 column fluid layout issues, 3rd column too wide
我一直在尝试通过遵循http://www.alistapart.com/articles/holygrail/ (左300px固定,中心流体,右300px固定)实现3列流体布局,由于某种原因,第3列正在弹出布局的右侧。
这就是我想要的与我得到的: http : //i.stack.imgur.com/qFVVP.png
我正在Linux Chrome和FF(这两个最新的稳定版本)上对其进行测试。
我的CSS是:
#home {
min-width:900px;
font-family: arial;
font-size: 12px;
color: #565656;
}
/* Main Page Divisions */
#page-top {
height: 120px;
background-color: #ffffffff;
}
#page-middle {
height: 250px;
background-color: #6AC0EB;
float:left;
width:100%;
padding-left: 300px; /* LC width */
padding-right: 300px; /* RC width */
}
#page-middle .column {
position: relative;
float: left;
}
#page-bottom {
clear:both;
height: 300px;
background-color:#EDEDED;
overflow:scroll;
}
/* Middle Page Divisions */
#page-middle-centre {
width:60%;
}
#page-middle-left {
width: 300px; /* LC width */
right: 300px; /* LC width */
margin-left: -60%;
}
#page-middle-right {
width: 300px; /* RC width */
margin-right:-300px; /* RC width */
background: #FDE95E;
}
/* Bottom Page Divisions */
#page-bottom-left {
width: 49%;
float:left;
text-align: right;
}
#page-bottom-right {
width: 49%;
float:right;
text-align: left;
}
h2 {
font-family: "Quicksand";
font-size: 130%;
}
h1#title-block {
font-family: "Quicksand";
font-size: 3em;
color: #FFFFFF;
letter-spacing:-3px;
}
我的HTML如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Layout</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="test.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="page-top">
This is the header
</div>
<div id="page-middle">
<div id="page-middle-centre" class="column">
middle section middle section middle section middle section middle section middle section middle section middle section
</div>
<div id="page-middle-left" class="column">
<h1 id="title-block">Title Block</h1>
<p id="quicksand">Menu 1 | Menu 2 | Menu 3 | Menu 4</p>
</div>
<div id="page-middle-right" class="column">
Right section Right section Right section Right section Right section Right section Right section Right section
</div>
</div>
<div id="page-bottom">
This is the footer
</div>
</body>
</html>
在您的html中,列div的顺序为:
您在alistapart网站上使用的示例的列顺序为:
切换这些,它可能会正常工作。 祝好运!
由于某种原因,页面中间元素上的width:100%导致了此问题...
#page-middle {
height: 250px;
background-color: #6AC0EB;
float:left;
width:100%; <----------------
padding-left: 300px; /* LC width */
padding-right: 300px; /* RC width */
}
一旦将其删除,一切都将对齐。 不太确定我是否了解这背后的逻辑,但至少它是固定的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.