Question

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

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Photoblog</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>  
  </head>
  <body>
    <div id="container">  

      <header>
        <h1>Photoblog</h1>
      </header>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

      <article>
        <h2>Welcome:</h2>
        <p>
          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.
        </p>    
      </article>

      <article>
        <h2>First Impressions</h2>
        <p>
          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.
        </p>        
      </article>

      <article>
        <h2>Bro</h2>
        <p>
          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.
        </p>            
      </article>

      <aside>
        <h2>About Me</h2>
        <p>
          Hello here is some placeholder text. Hello here is some placeholder text.
          Hello here is some placeholder text. Hello here is some placeholder text.
          Hello here is some placeholder text. Hello here is some placeholder text.
        </p>
      </aside>

      <footer>
        <p>By Howard Tang</p>
      </footer>

    </div>
  </body>
</html>

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;
}

Answer 1

您没有考虑宽度中的填充。如果您将宽度减小到下面的宽度，aside将移回到侧面。

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 */
}

为什么我会放在本页底部？

1 个答案: