0
我遇到了一個問題，我的一個div的具體內容爲.mid-content。它佔據了我的外部div的整個高度.main-content但我希望它低於我的其他兩個內部div div .posts和.sidebars。相反，它位於.sidebars的左側。Div佔用了容器的整個高度，但仍停留在底部
我試圖將.mid-content div顯示爲一個塊，但問題仍然存在。我也試着玩弄容器div中的溢出設置，它會導致我的頭部邊框被移除。
這裏是我的代碼
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div class="container">
<div class="header">
<ul class="navigation-bar">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="main-content">
<div class="posts top-buffer">
<div class="post">
<h1>A Post About Something</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
</p>
</div>
</div>
<div class="sidebars top-buffer">
<div class="sidebar">
<h1>Sidebar One</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
</p>
</div>
</div>
<div class="mid-content">
<h1>
This Should be below everything
</h1>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
font-family: futura;
}
body {
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
}
.header {
width: 100%;
height: 80px;
background-color: #777777;
border: 3px solid black;
border-radius: 5px;
}
.navigation-bar {
height: 80px;
width: 80%;
}
.navigation-bar > ul {
margin: 0 auto;
}
.navigation-bar > li {
width: 20%;
list-style: none;
float: left;
}
.navigation-bar > li > a {
display: block;
color: white;
line-height: 80px;
text-align: center;
text-decoration: none;
}
.navigation-bar a:hover, .navigation-bar a:active, .active {
background-color: #ff8989;
}
.main-content {
overflow: hidden;
}
.top-buffer {
margin-top: 2%;
}
.posts {
width: 55%;
float: left;
border: 3px solid black;
padding: 2% 4%;
margin-top: 2%;
margin-bottom: 4%;
border-radius: 5px;
background-color: #ffc893;
}
.sidebars {
width: 26%;
float: right;
border: 3px solid black;
border-radius: 5px;
padding: 2% 3%;
background-color: #b5ffb2;
}
.mid-content {
width: 100%;
display: block;
}
用plnkr更新來演示。 –
這解決了這個問題，但是當我做了20px的margin-top時，div：.mid-content的位置保持不變？ – buttonSmasher96
將塊的顯示更改爲嵌入塊，並且可以將邊距和填充應用於div。 –