1
如果我正在經過舊的地面，我很抱歉，但是我已經搜索並尋找解決方案，但現在準備好將我的頭髮從字面上拉出Arrgghh :( 你們是我的最後的手段。我預先感謝你100次:)導遊在右邊的導航欄下面飄動盒子
請幫助:)
我想我的位置一側（預留）框右上方的導航欄下方彼此的頂部，而不是並排，但似乎無法做到這一點。請你可愛的人發現我的代碼錯誤或提供解決方案。 另外，我希望保持儘可能簡單
HTML5代碼：
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Care farm">
<meta name="keywords" content="agriculture, dsiability, farm,
learning, health, green care, outdoors, autism">
<meta name="author" content="Dean xxxxx">
<link rel="stylesheet" href="css/style.css" type="text/css" title="Able
Farm" media="all">
<title>Care Farm</title>
</head>
<body class="body">
<header class="mainHeader">
<img src="img/logo.jpg" alt="logo">
<nav><ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="care_farming.html">Care Farming</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="index.html" title="post">first post</a></h2>
</header>
<footer>
<p class="post info">this post is written by dean</p>
</footer>
<content>
<p>Lorem ipsum dolor sit ame.</p>
<p>Lorem ipsum dolor s.</p>
</content>
</article>
<article class="bottomcontent">
<header>
<h2><a href="index.html" title="second post">second </a></h2>
</header>
<footer>
<p class="post info">this post is written by dean</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, cdo eiusm.</p>
<p>Lorem ipsum dolor sit amet, consectetur a.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>top sidebar</h2>
<p>Lorem ipsum Excepteur cupidatat non proident, .</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>middle sidebar</h2>
<p>Lorem ipsum dolor sit a fugiat nulla pariatur.</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>bottom sidebar</h2>
<p>Lorem ipsum doloe eu fugiat nulla pariatur. Excepteur.</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyright © 2017 Dean King
</footer>
</body>
</html>
CSS3代碼：
body {
background-image: url('../img/grass2.png');
color: #000305;
font-family: Arial, 'Lucida Sans Unicode';
font-size: 112.5%; /* base font size is 18px/13.5pt */
text-align: left;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainHeader img {
width: 30%;
height: auto;
margin: 2%;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px; /* ajust height */
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow:
}
.content {
width: 70%;
background-color:
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 3%;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 3%;
margin-left: 3%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 3%;
margin-left: 3%;
margin-bottom: 2%;
}
.mainFooter{
width: 100%;
float: left;
height: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
padding: 3% 5%;
margin-top: 2% 0;
}
.mainFooter p {
width: 92%;
margin: 1% auto;
color: #FFF;
}
的一個問題是，在你的樣式'。內容'，你的'background-color'沒有值，這意味着你的下一個聲明（'float：left;'）不會被解析。請參閱下面的更完整的答案。 – Rounin
謝謝。它是偉大的有一個新的眼睛的東西。你先生，是一個燻肉保存嘿！ – dkin