0
我是CSS新手，一直在嘗試構建2列網站。代碼在這裏：JSFiddle。有一個右側內容區域的左側菜單。如果窗口足夠大，則佈局沒有問題。但是，如果將窗口大小調整爲較窄的範圍，則內容會溢出到菜單區域，而我不知道如何修正此問題，而不將位置固定或絕對，我不想這樣做，因爲我想要一個頁腳底部。有人可以幫我解決這個問題嗎？非常感謝！在調整大小時停止兩列重疊
我也爲長碼事先道歉。我不知道是哪一部分就是問題所在並粘貼一切 的html代碼：
<body>
<div id="wrapper">
<div id="menunav">
<img src="images/logo.jpg" alt="siteLogo" class="centered" id="logo"/>
<nav id="nav">
<ul>
<li><a href="index.html" class="thispage">Portfolio</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="#">Resume</a></li>
</ul>
</nav>
</div>
<div id="content">
<div class="grid3">
<article class="bucket" >
<a href="#">
<img src="images/baskerville1.jpg" alt=""/>
<div class = "img-overlay">
<h3>Monogram</h3></div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Gastalt.png" alt=""/>
<div class="img-overlay">
<h3>Gastalt Composition</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/redThread.png" alt=""/>
<div class="img-overlay">
<h3>The Red Thread - A Visual Book</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay">
<h3>Typographic Hierarchy</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Spaces.png" alt=""/>
<div class="img-overlay">
<h3>Living in Two Spaces</h3>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©2014</div>
</div>
</body>
CSS代碼：
@charset "UTF-8";
*{
margin:0;
}
html, body {
margin: 0;
background-color: #FFFFFF;
height: 100%;
padding: 0;
}
#wrapper {
background-color: #FFFFFF;
width: 1000px;
padding-bottom: 0px;
margin:0 auto;
position:relative;
min-height: 100%;
}
#menunav {
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}
#logo {
width: 70%;
position: static;
}
#menunav ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menunav a {
display: block;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 12px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding-left: 20px;
background-color: rgba(193,193,193,1.00);
color: rgba(0,0,0,1.00);
}
#menunav a:hover, #menunav a:active, #mainnav a:focus, #menunav a.thispage {
background-color: rgba(0,174,210,1.00);
color: rgba(255,255,255,1.00);
text-decoration: none;
}
#content {
display: block;
margin: 0 auto;
padding-left:225px;
padding-top:80px;
background-color:#fffeee;
}
.centered {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: auto;
margin-bottom: auto;
}
a {
text-decoration: none;
}
.bucket {
position:relative;
float: left;
margin-left: 3.2%;
margin-bottom:30px;
}
.grid3 .bucket:nth-of-type(3n+1){
margin-left: 0;
clear: left;
}
.grid3 .bucket{
width: 31.2%;
}
.img-overlay h3 {
opacity: 1;
display: inline-block;
margin: auto;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
color: rgba(255,254,254,1.00);
text-align: center;
vertical-align: middle;
}
.img-overlay {
background-color: rgba(0,0,0,0.6);
bottom: 0px;
top: 0px;
opacity: 0;
overflow:hidden;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
}
.bucket:hover .img-overlay {
opacity:1;
filter: alpha(opacity=100);
}
.bucket img {
width: 100%;
}
#footer{
clear:both;
text-align: center;
line-height:20px;
vertical-align: middle;
}
@media screen and (max-width:740px){
/*change 3 column to 2 column*/
.grid3 .bucket:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.grid3 .bucket:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}
'position：static;'< - 爲什麼？它默認是靜態的... –
哦......很好！它可能來自該文件的以前版本。 – susanz
那麼你的目標是什麼？你希望左列在你滾動時是靜態的嗎？還是隻想讓列不重疊？ – EmileKumfa