Question

我试图找出为什么我的侧边栏内容（右列）环绕到内容列（左列）时，侧边栏中的内容高于内容列的高度。

链接到我的网页 http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/divLayout/index.php

链接到我的CSS http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/divLayout/divLayout.css http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/layout/reset.css

我不是css专家，我理解基础知识，但不了解每个属性的细节以及如何与他人互动。我使用为HTML5编写的一些不同的教程构建了这个布局，但我使用的是标准标签。

非常感谢任何帮助。

原始HTML

    <div id="container">

   <!-- header -->  
   <div id="header">
      <h1 id="title">Responsive Layout</h1>
   </div>


   <!-- Navigation -->  
   <div id="menu" class="clearfix">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </div> 

   <!-- Main Content area -->
   <div id="content">
      <h2>Built with CSS3 and HTML5</h2>
      <!-- Main content -->  
      <p>Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.
  Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.</p>   </div>

   <!-- Sidebar -->
   <div  id="sidebar">
      <h3>This is the Sidebar</h3>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>  
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li> 
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>    
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>   
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>       
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>      
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
      <!-- Sidebar content -->     
   </div>

   <!-- Footer -->
   <div id="footer" class="clearfix">
      Footer
   </div>

</div>

原创CSS

@charset "UTF-8";
/* CSS Document */

.clearfix {
    display: block;
    clear: both;
}


#container{
   margin: 0 auto;
   max-width: 1200px;
}
#header {
   width: 94%;
   padding: 3%;
   background-color: #FF5722;
}

#header #title {
   font-size: 50px;
   color: #fff;
}

#menu {
   width: 97%;
   background-color: #E64A19;
   padding: 0 1.5% 0 1.5%;
}

#menu ul li {
   display: inline-block;
   padding: 15px 1.5% 15px 1.5% ;
}

#menu ul li a {
   text-decoration: none;
   color: #ffffff;
   font-size: 1.2em;
}

#menu ul li a:hover {
   color: #000000;
   text-decoration: none;
}

#content {
   float: left;
   padding: 3%;
   width: 64%;
}
#aside {
   float: right;
   padding: 3%;
   width: 24%;
   background-color: #eee;
}
#footer{
   width: 94%;
   padding: 3%;
   background-color: #FF5722;
   border-top: 5px solid #E64A19;
   color: #fff;
   text-align: center;
}

@media all and (max-width : 768px) {

   #header {
      text-align: center;
   }

   #menu {
      text-align: center;
   }

   #content {
      width: 94%;
      padding: 3%;   
   }

   #sidebar {
      width: 94%;
      padding: 3%;
      border-top: 3px solid #E64A19;
   }

}
@media all and (max-width : 330px) {

   #menu ul li {
      display:block;
      width: 94%;
   }

}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}
body {
    font-size:14px;
    line-height: 28px;
    color: #333;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
}

p {
    margin: 0 0 24px;
    margin: 0 0 2.4rem;
    padding: 0;
}

Answer 1

据我所知，它非常简单。使用浮动到右侧边栏，它将保持不变

div#sidebar{ float: right;}

Answer 2

如果您要使布局响应，则可能需要考虑将内容和侧边栏显示为内联块，而不是使用浮动。它可以更好地跨浏览器，你不必清除您的div。试试这个：

#content{
    display:inline-block;
    padding:3%;
    width:64%;
}

#sidebar{
    display:inline-block;
    vertical-align:top;
}

如何使用CSS将内容保留在自己的列中？

2 个答案: