CSS 浮动无法正常工作

Question

我正在尝试仅使用 CSS 和 div 获得真正基本的布局。我想做的是在同一行有 3 个大 div，在该行第一个 div 的第一个 div 下面有一个小 div。因为我试图为所有它们设置 400px 的高度，除了第一个和小的 - 它们的高度分别为 300px 和 100px - 我希望它们在同一个 "line" 上显示做一个大块。我得到的是以下内容：

这是我的 CSS:

body    {
    background-color:white;
    }
header    { 
        background-color:black;
        color:red;
        height:10%;
        width:100%;
        padding:1px;
        font-family:verdana;
       }
nav      {  
        background-color:#eeeeee;
        text-align:center;
        height:300px;
        width:10%;
        float:left;
        overflow:hidden;
       }
article {
        height:100px;
        clear:left;
        width:10%;
        background-color:blue;
        overflow:hidden;
    }
section {   
        background-color:yellow;
        height:400px;
        width:50%;
        float:left;
        font-style:italic;
        overflow:hidden;
           }
aside {
        background-color:red;
        float:left;
        width:40%;
        height:400px;
        overflow:hidden;
    }
footer {    
        background-color:black;
        padding:5px;
        text-align:center;
        color:white;
        clear:both;
    }
aside img
    {
        max-width:100%; 
        max-height:100%;
        margin:0 auto;
        display:block;
    }

这是我的 HTML:

<body>
<header>
    <h1 align="center"> Welcome to the official website of Almost Free Furniture</h1>
</header>

<nav>
    <p> <a href="catalog.html">Products</a> </p>
</nav>

<article>
    <p>Hi</p>
</article>

<section>
    <p>Please excuse us while we build our new website.</p>
    <p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>

<aside id="aside">  
</aside>

<footer>
    This is a work in progress.<br>
    Copyright AlmostFreeFurniture.
</footer>

我猜问题出在我想让黄色 div 漂浮在两个漂浮的 div 旁边，这可能是不可能的。关于如何解决这个问题的任何提示？

Answer 1

我会通过将 nav 和 article 元素包装在一个单独的元素中来解决这个问题：

.left-column {
  width: 10%;
  float:left;
}
nav {  
  background-color:#eee;
  text-align:center;
  height:300px;
  width:100%;
  overflow:hidden;
}
article {
  height:100px;
  width:100%;
  background-color:blue;
  overflow:hidden;
}

标记将变成这样：

<div class="left-column">
  <nav>
    <p> <a href="catalog.html">Products</a> </p>
  </nav>
  <article>
    <p>Hi</p>
  </article>
</div>

Answer 2

为什么不在你的三个元素周围放一个父元素并给它 display: inline-block;？

这里有一个 Codepen，用于解决您的问题的示例方法：LINK TO CODEPEN

如果你喜欢看这里，这里也有一些代码：

HTML

欢迎来到几乎免费家具官方网站

  <div class="inline-div"> <!-- These are the inline-block wrappers -->

    <nav>
        <p> <a href="catalog.html">Products</a> </p>
    </nav>

    <article>
        <p>Hi</p>
    </article>

  </div>

  <div class="inline-div"> <!-- These are the inline-block wrappers -->

    <section>
        <p>Please excuse us while we build our new website.</p>
        <p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
    </section>

  </div>


  <div class="inline-div"> <!-- These are the inline-block wrappers -->

    <aside id="aside">ANOTHER</aside>

  </div>

<footer>
    This is a work in progress.<br>
    Copyright AlmostFreeFurniture.
</footer>

CSS

    header { 
  background-color:black;
  color:red;
  height:10%; width:100%;
  padding:1px;
  font-family:verdana;
}
nav {  
  background-color:#eeeeee;
  text-align:center;
  height:300px;
  overflow:hidden;
}
article { 
  height:100px;
  background-color:blue;
  overflow:hidden;
}
section {
  background-color:yellow; 
  height:400px;
  font-style:italic;
  overflow:hidden;
           }
aside {
  background-color:red;
  height:400px;
  overflow:hidden;
}
footer {    
  background-color:black;
  padding:5px;
  text-align:center;
  color:white;
}
aside img {
  max-width:100%; max-height:100%;
  margin:0 auto; 
  display:block;
}

.inline-div { display: inline-block; width: 33%; }

CSS 浮动无法正常工作

CSS float not working properly

css

html

css-float