在右边导航栏下面的浮动框旁边的指导

时间：2017-03-06 10:49:18

标签： html5 css3

我很抱歉，如果我要过去的地方，但是我已经搜索并寻找解决方案，但我现在已准备好将我的头发拉出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 &copy; 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;
 }

1 个答案:

答案 0 :(得分：0)

一种可能的方法是：

  • 使用<aside>
    • 围绕您的3个<div class="sidebar">...</div>元素
  • 将<div class="sidebar">浮动到右侧
  • 向左浮动<div class="content">

工作示例：

＆＃13;
＆＃13; 
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 {
float: left;
width: 70%;
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 {
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 {
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 3%;
margin-left: 3%;
margin-bottom: 2%;
}   

.bottom-sidebar {
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;
 }

.sidebar {
display: block;
float: right;
width: 21%;
}
＆＃13; 
<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 class="sidebar">
    <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>
   </div>

  </div>

    <footer class="mainFooter">
    <p>Copyright &copy; 2017 Dean King    
    </footer>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题