Question

我有简单的网站，有经典元素：容器，标题，内容和页脚。容器具有背景颜色，覆盖网站的整个内容（包括标题，内容和页脚）。由于某种原因，这不适用于容器中的浮动元素。

我在StackOverflow找到了一个解决方案，但感觉不对。解决方案是设置{display：table; }到容器ID。

页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
<style>

body
{
  background-color: #999;
  font-family: Tahoma;
  font-size: 12px;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  margin: 0px;
  padding: 0px;  
}

h1
{
  color: green;
  font-family:Tahoma;
  font-size: 26px;
  font-weight: bold;
  margin: 5px 0;
  text-indent: 10px;
  width: 100%;
}

#container
{
  background: #FFF;
  margin: 0 auto;
  width: 950px;
  position: relative;
}

#header
{
  position: relative;
  height: 100px;
  width: 950px;
}


#content, #content-ext
{
  float: left;
  margin: 0;
  width: 950px;
}

#nav
{
  float: left;
  padding: 10px 10px 10px 0;
  width: 200px;
}

ul#menu
{
    cursor: pointer;
    display: block;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 200px;
}

ul#menu li
{
    margin: 0;
    padding: 0;
}

ul#menu li a
{
    color: #111;
    display: inline-block;
    height: 50px;
    font-size: 18px;
    line-height: 60px;
    margin: 0 auto;
    padding: 0 0 0 10px;
    text-decoration: none;
    width: 100%;
}

#mainImg
{
  background: #111;
  height: 150px;
  float: right;
  margin: 0 0 20px 0;
  width: 710px;   
}

#main-content
{
  float: right;
  width: 710px;
}

#extra
{
  float: left;
  width: 500px;
}

#contact
{
  float: left;
  width: 450px;
}

#footer
{
  color:#999;
  height:20px;
  width:950px;
}

</style>


</head>
<body>
    <div id="container">
    <div id="header">
      <h1>test</h1>
    </div>
        <div id="content">
      <div id="nav">
        <h1>Menu</h1>
        <ul id="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div id="mainImg"></div>
      <div id="main-content">
        <h1>Welkom</h1>
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed arcu arcu, a interdum metus. Aenean vel libero nulla. Nulla facilisi. Maecenas malesuada libero a ante vulputate vestibulum. Cras id neque vitae lectus luctus tempor non non risus. Morbi aliquam porttitor facilisis. Sed pulvinar erat sit amet est auctor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget arcu lorem, non accumsan ipsum. Donec venenatis adipiscing massa, sed molestie augue ullamcorper et.</strong>
        <br/><br/>
        Morbi id eros vitae risus tristique bibendum. Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel, volutpat eget sapien. Proin tempus nunc sit amet ligula viverra hendrerit. Donec tempus tristique risus. Fusce at semper est. Etiam ligula est, varius ut tempus at, laoreet bibendum eros. In hac habitasse platea dictumst.</p>
      </div>
    </div>
    <div id="content-ext">
      <div id="extra">
        <h1>Extra</h1>
        <p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
      </div>
      <div id="contact">
        <h1>Contact</h1>
        <p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
      </div>
    </div>
    <div id="footer"></div>
    </div>
</body>
</html>

在容器中使用浮动元素是否有合适的解决方案？并将容器显示为整体背景？

Answer 1

嗯，有两种经典的解决方案：

设置“溢出：隐藏;”到#container。它会清除浮动但有缺点 - 如果你有“position：absolute;”的元素在必须部分位于其外部的容器内部，它们将被溢出切割。
在#container上使用clearfix hack：http://www.webtoolkit.info/css-clearfix.html它将为您修复它并且没有这个缺点但更复杂。

不确定它是否比“display：table;”更好或不，通过。

Answer 2

离开显示：表，对于一个简单的问题，它不是一个好的解决方案。您从一个简单的布局开始，从一个干净且经过测试的布局开始是一个很好的做法。

我最喜欢的资源是：

Little boxes Free-css code sucks

祝你好运

CSS中心站点与浮动元素和显示完整的容器背景颜色

2 个答案: