1

我正在尝试编写一个 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>

这是我的代码的输出。

在此处输入图像描述

但是，应该是这样——

在此处输入图像描述

提前致谢。

4

3 回答 3

2

添加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%;
}

希望这可以帮助。

于 2013-05-21T11:23:10.300 回答
0

你需要清除你的浮动。

基于浮动的布局的一个常见问题是浮动的容器不想伸展以容纳浮动。如果你想在所有浮动周围添加一个边框（即容器周围的边框），你必须以某种方式命令浏览器一直拉伸容器。

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

在 Web Platform Docs 中还有一些您可能会发现有用的信息 - CSS 布局模型：边框、框、边距和填充

于 2013-05-21T11:23:55.003 回答
0 
#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.
于 2013-05-21T11:28:48.873 回答