Question

我正在开发一个webapp，我想把浮动div放在一起，我称之为人造列，因为缺乏更好的描述。我知道这是非常基本的，但由于某种原因 - 可能无能 - 我无法让这个工作

程序：我左右浮动两个div。这些div嵌套在另一个div中，我想放置一个边框。

代码：

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>StackOvervlow</title>
    <style type="text/css" media="screen">
      body {
        width: 900px;
      }
      #wrapper {
        border: 2px solid gray;
      }
      #container {
        width: 600px;
        float: left;
        background-color:#678;
      }
      #sidebar {
        width: 200px;
        float: right;
        background-color: bisque;
      }
      #footer {
        clear: both;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="header"></div>
    <div id="wrapper">
      <div id="container">
        <p>Placeholder Text.</p>
        <p>Placeholder Text.</p>
      </div>
      <div id="sidebar">
        <p>Placeholder Text.</p>
      </div>
    </div>
    <div id="footer">
      <p>Some footer stuffs</p>
    </div>
  </body>
</html>

The outcome...

请解释为什么边框显示为一条线并且没有按预期绕过两个封闭的div。如果你能提出解决方法，我会很感激。

谢谢。

Answer 1

只需添加：

overflow: hidden;

到#wrapper的CSS，演示位于：JS Fiddle。

边框折叠到一条线的原因是因为浮动的元素从文档的流中移除，这意味着它们在其父元素中基本上不占用空间，在没有内容的情况下，它会折叠。 overflow: hidden;导致父元素环绕其子元素。但是，说实话，我并不特别理解为什么会发生。

对于CSS浮点数的复习/入门读取CSS Floats 101, at A List Apart值得一提，但是，有关其行为的指示。

Answer 2

当你浮动元素时，它不会占用与内联时相同的空间。

解决方案是在底部放置一个清除两个属性的块级元素：

<div style='clear:both;'></div>

详情请见http://jsfiddle.net/billymoon/eDqg5/

HTML Faux Columns周围的边框

2 个答案: