I'm wondering why my aside is at the bottom of the page instead of next to the main content when I apply (float:right;) in the css. I've tried to float it on the left and the main content on the right but had the same problem.

我想知道为什么当我在css中应用（float：right;）时，我的旁边是在页面底部而不是主要内容旁边。我试图将它漂浮在左边，主要内容放在右边，但是有同样的问题。

HTML:

HTML：

  
    
      
  
  
    
  

      
        
Photoblog
      

      

      

        
Welcome:
        

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
          justo, quis consectetur arcu.  Etiam vel orci massa, vel vestibulum ante.
          Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus, 
          sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
          Praesent rhoncus mauris mattis justo mattis eget egestas augue 
          interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum, 
          purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl 
          ac turpis.
        
    
      

      

        
First Impressions
        

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
          justo, quis consectetur arcu.  Etiam vel orci massa, vel vestibulum ante.
          Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus, 
          sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
          Praesent rhoncus mauris mattis justo mattis eget egestas augue 
          interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum, 
          purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl 
          ac turpis.
        
        
      

      

        
Bro
        

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
          justo, quis consectetur arcu.  Etiam vel orci massa, vel vestibulum ante.
          Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus, 
          sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
          Praesent rhoncus mauris mattis justo mattis eget egestas augue 
          interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum, 
          purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl 
          ac turpis.
        
            
      

      

      

    
  

CSS:

CSS：

body {
    background-color: #F2E9E1;
    color : #111111;
    font-family : "Arial", "helvetica", sans-serif;
    font-size : 11pt;
}

header h1 {
    background-color: black;
    padding:0px;
    color: #ffffff;
    display:block;
    height: 80px;
    width: 960px;
    text-align : center;
    line-height:80px ;
    font-family : "Georgia", Serif;
}

nav ul {
    list-style : none;
    width:960px;
    padding : 0;
    text-align : center;
}

nav ul li {
    color : #111111;
    display : block;
}

nav {
    display : block;
}

nav a {
    color : #111111;
}

nav ul li {
    display : inline;
}

article {
    float : left;
    width : 600px;
    padding-top:0px;
    padding-right : 20px;
    padding-left : 20px;
    padding-bottom : 40px;
    background-color : #cbe86b;
}

article img {
    height : 400px;
    width : 600px;
}

aside {
    padding-left: 20px;
    float: right;
    background-color : #cccccc;
    width : 300px;
}

#container {
    width : 900px;
    margin : 0 auto;
}

footer {
    margin-top: 20px;
    float : left;
    text-align: left;
    width : 600px;
}

1 个解决方案

article {
    background-color: #CBE86B;
    float: left;
    padding: 0 20px 40px;
    width: 560px; /* 560px + 20px + 20px = 600px */
}

aside {
    background-color: #CCCCCC;
    float: right;
    padding-left: 20px;
    width: 280px; /* 280px + 20px = 300px */
}