CSS两栏布局问题

Question

我试图编写一个CSS两列布局。 在我的代码中，有三个<div>标记。 第一个<div>标记包含另外两个<div>标记。 一种是用于导航，另一种是用于内容。 我将这些标签制作为浮动标签。 这些标签没有问题。 问题是，父<div>标记具有2px边框，但不会在屏幕周围呈现此边框。

CSS代码：

#wrap{
    margin: 0 auto;
    width: 900px;
    border: 2px solid #ADA095;
}

#nav{
    background-color: #DED8B9;
    float: left;
    width: 20%;
}

#content{
    background-color: #EDE9DB;
    float: right;
    width: 80%;
}

HTML代码：

<div id="wrap">
      <div id="nav">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
           in the film Dead Poets Society and gave names to the band The
           Darling Buds and the book and television series The Darling Buds
           of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
        </ul>

        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>

这是我的代码的输出。

但是，应该如下

提前致谢。

Answer 1

添加overflow:auto; 到<div id="wrap">

这是解决方案 。

HTML：

<div id="wrap">
      <div id="nav">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
           in the film Dead Poets Society and gave names to the band The
           Darling Buds and the book and television series The Darling Buds
           of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
        </ul>

        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>

CSS：

#wrap{
    margin: 0 auto;
    width: 900px;
    border: 2px solid #ADA095;
    overflow:auto;
    background:#DED8B9;
}

#nav{
    background-color: #DED8B9;
    float: left;
    width: 20%;
}

#content{
    background-color: #EDE9DB;
    float: right;
    width: 80%;
}

希望这可以帮助。

Answer 2

您需要清理浮子 。

基于浮点数的布局的一个常见问题是，浮点数的容器不想拉伸以适应浮点数。 例如，如果要在所有浮动对象周围添加边框（即容器周围的边框），则必须以某种方式命令浏览器将容器一直拉长。

所以在这里，您可以添加overflow: hidden; 例如，将其放置到容器中，然后设置浮动内容的高度。

您还可以在Web平台文档中找到更多有用的信息-CSS布局模型：边框，框，边距和填充

Answer 3

#wrap{
    margin: 0 auto;
    width: 900px;
    border: 2px solid #ADA095;
    overflow:hidden;
    height:100%;
}

#nav{
    background-color: #DED8B9;
    float: left;
    width: 20%;
    height:100%;
}

#content{
    background-color: #EDE9DB;
    float: right;
    width: 80%;
    height:100%;
}

"Overflow:auto" and "overflow:hidden"  both are working. also add "height:100%" to all three divs.