-1
我想複製9gag首頁只是爲了練習。我不明白爲什麼我的邊欄一直在下降。我相信肯定有一些簡單的答案，但我無法弄清楚。爲什麼我的側邊欄一直向下？
body {
margin: 0;
padding: 0;
font-family: sans-serif, serif;
}
nav {
background: #000;
}
.logo {
margin-left: 5px;
float: left;
height: 50px;
}
.logo img {
max-height: 46px;
width: auto;
margin-right: 10px;
margin-top: 2px;
cursor: pointer;
}
ul {
height: 50px;
list-style: none;
display: inline-block;
margin: 0px;
margin-left: -40px;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
box-sizing: border-box;
line-height: 50px;
color: #FFF;
text-decoration: none;
}
.BigNav {
font-size: 14px;
font-weight: bold;
}
.BigNav a:hover {
color: #FFF;
background: #333;
}
.BigNav a {
border-right: 1px solid #333;
padding: 0 10px;
}
.SmallNav {
margin-left: -30px;
font-size: 14px;
}
.SmallNav a {
color: #999;
padding: 0 5px;
}
.SmallNav a:hover {
color: #FFF;
}
.notification {
float: right;
height: 50px;
}
.notification img {
max-height: 30px;
width: auto;
margin-right: 12px;
margin-top: 10px;
cursor: pointer;
}
.search {
float: right;
height: 50px;
}
.search img {
max-height: 24px;
width: auto;
margin-right: 12px;
margin-top: 13px;
cursor: pointer;
}
.profile {
float: right;
height: 50px;
vertical-align: middle;
}
.profile img {
max-height: 46px;
width: auto;
margin-right: 10px;
margin-top: 3px;
cursor: pointer;
}
.upload {
color: #FFF;
float: right;
background: #0099FF;
padding: 0 5px;
cursor: pointer;
font-weight: bold;
}
.upload:hover {
background: #13AAFF;
}
.wrapper {
width: 66%;
margin: 0 auto;
clear: both;
}
.post {
width: 66%;
float: left;
}
.post img {
width: 550px;
height: auto;
}
.aside {
width: 300px;
float: left;
}
.aside img {
width: 300px;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>9 GAG</title>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="logo.png">
</div>
<!--Menu-->
<ul class="BigNav">
<li><a href="#">Hot</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Fresh</a></li>
<li><a href="#">Sections▾</a></li>
</ul>
<ul class="SmallNav">
<li><a href="#">Video</a></li>
<li><a href="#">Cosplay</a></li>
<li><a href="#">Girl</a></li>
<li><a href="#">Comic</a></li>
<li><a href="#">NSFW</a></li>
<li><a href="#">GIF</a></li>
<li><a href="#">WTF</a></li>
<li><a href="#">Geeky</a></li>
<li><a href="#">ʕ •ᴥ• ʔ</a></li>
<li><a href="#">Anime & Manga</a></li>
</ul>
<!--Right side icons-->
<div class="upload">
<p> + Upload </p>
</div>
<div class="profile">
<img src="person-flat.png">
</div>
<div class="notification">
<img src="not.png">
</div>
<div class="search">
<img src="search.png">
</div>
</nav>
</header>
<!--Content area-->
<div class="wrapper">
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="aside">
<img src="http://img-9gag-fun.9cache.com/photo/ao9dLpe_700b_v1.jpg">
<h4>Comment your country's favourite hangover food!</h4>
</div>
<div class="aside">
<img src="http://img-9gag-fun.9cache.com/photo/ao9dLpe_700b_v1.jpg">
<h4>Comment your country's favourite hangover food!</h4>
</div>
<div class="aside">
<img src="http://img-9gag-fun.9cache.com/photo/ao9dLpe_700b_v1.jpg">
<h4>Comment your country's favourite hangover food!</h4>
</div>
</div>
</body>
</html>所以，是的，我需要添加一些文字，因爲有太多的代碼。謝謝你們提前。
今後，請僅粘貼相關代碼。 – CZorio