Question

我在JSFiddle中创建了一个简单的HTML / CSS示例来显示我的问题。我希望他们之间有多个部分。每个部分的宽度应为100％，此部分的内容区域应为978像素。

一般来说，我的HTML / CSS似乎有用，但是当我想在另一个DIV（内容）中添加多个DIV并在左侧（博客）上对齐一个右侧（侧边栏）的另一个时，那么就是包装器的背景出错了（内容包装器）。对于content-wrapper和about-wrapper，我有相同的背景。两者都是灰色的。但内容包装器背景颜色必须为绿色。

我的问题：

我的HTML / CSS有什么问题：即使我在CSS中设置了不同的颜色，为什么我的两个包装器都有相同的背景颜色？
这个布局是否是一个很好的HTML / CSS？

HTML

<div class="page-wrapper">

  <div class="header-wrapper">
    <div class="header center">header</div>
  </div>

  <div class="content-wrapper">
    <div class="content center">
      <div class="blog">
        blog
      </div>
      <div class="sidebar">
        sidebar
      </div>
    </div>
  </div>  

  <div class="about-wrapper">
    <div class="about center">about</div>
  </div>

  <div class="footer-wrapper">
    <div class="footer center">footer</div>
  </div>

</div> <!-- end page-wrapper -->

CSS

.page-wrapper {
  width:100%;
  background-color: red;
}

.center {
     margin: 0 auto;
     width: 100px; 
}

.blog {
  float: left;
  width: 678px;
}

.sidebar {
  float: right;
  width: 300px;
}

.header-wrapper {background-color:yellow;width:100%;}
.content-wrapper {background-color:green;width:100%;}
.about-wrapper {background-color:gray;width:100%;}
.footer-wrapper {background-color:blue;width:100%;}

.header {
  width: 978px;
  background-color: red;
}

.content {
  width: 978px;
  background-color:blue;
}

.about {
  width: 978px;
  background-color: yellow;
}

.footer {
  width: 978px;
  background-color: green;
}

https://jsfiddle.net/1f867k3v/

Answer 1

在CSS .content课程中，添加overflow: hidden将使您的代码正常工作。但是我在这里修改了HTML 5和CSS 3的功能。您的代码遵循HTML 4和CSS 2.

<div class="page-wrapper">

  <header class="header-wrapper">
    <div class="center">header</div>
  </header>

  <content class="content-wrapper">
    <section class="blog">
       blog
    </section>
    <aside class="sidebar">
       sidebar
    </aside>
  </content>  

  <div class="about-wrapper">
    <div class="center">about</div>
  </div>

  <footer class="footer-wrapper">
    <div class="center">footer</div>
  </footer>

</div> <!-- end page-wrapper -->

CSS

.page-wrapper {
  width:100%;
}

.center {
  text-align:center; 
}

.blog {
  flex: 2;
}

.sidebar {
  flex: 1;
}

.header-wrapper {background-color:yellow;}
.content-wrapper {background-color:green;display:flex;}
.about-wrapper {background-color:gray;}
.footer-wrapper {background-color:blue;}

https://jsfiddle.net/5x8qsnet/

Answer 2

你的.content区域内只有浮动的孩子，所以它会折叠到零高度。您需要添加.clearfix来修复：

.page-wrapper {
  width:100%;
  background-color: red;
}

.center {
     margin: 0 auto;
     width: 100px; 
}

.blog {
  float: left;
  width: 678px;
}

.sidebar {
  float: right;
  width: 300px;
}

.header-wrapper {background-color:yellow;width:100%;}
.content-wrapper {background-color:green;width:100%;}
.about-wrapper {background-color:gray;width:100%;}
.footer-wrapper {background-color:blue;width:100%;}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.header {
  width: 978px;
  background-color: red;
}

.content {
  width: 978px;
  background-color:blue;
}

.about {
  width: 978px;
  background-color: yellow;
}

.footer {
  width: 978px;
  background-color: green;
}

<div class="page-wrapper">

  <div class="header-wrapper">
    <div class="header center">header</div>
  </div>

  <div class="content-wrapper clearfix">
    <div class="content center clearfix">
      <div class="blog">
        blog
      </div>
      <div class="sidebar">
        sidebar
      </div>
    </div>
  </div>

  <div class="about-wrapper">
    <div class="about center">about</div>
  </div>

  <div class="footer-wrapper">
    <div class="footer center">footer</div>
  </div>

</div>

这个布局是否是一个很好的HTML / CSS？

答案取决于你问的是谁 - 就个人而言，我会使用flexbox。

级联div时Div背景错误

2 个答案: