Question

我正在尝试使用CSS和div来获得一个非常基本的布局。我想要做的是在同一行有3个大div，在行的第一个div的第一个div下面有一个小div。因为我试图为所有这些设置400px的高度，除了第一个和小的一个 - 高度为300px和100px - 我希望它们显示所有在同一“线”，制作一个大块。我得到的是以下内容： problem in my layout

这是我的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

欢迎来到Almost Free Furniture的官方网站

  <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浮动不正常

2 个答案: