0

您好，我知道有很多关于内容动态宽度的问题。但是这个具体的问题我找不到一个好的答案。

我的网站有以下设置（某些页面）

         +--------------+---------------------------------+
     |              |                                 |
     |  Sidebar     |       Content                   |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     +--------------+---------------------------------+

总宽度为980px

但是在其中一些页面上，我不使用侧边栏，所以左侧有空白区域。。在没有侧边栏的情况下，如何通过让内容页面向左流动来解决这个问题？

     +--------------+---------------------------------+
     |                                                |
     |                      Content                   |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     +--------------+---------------------------------+

我有以下html结构

我给了 side 和 content div 一个固定的宽度，并且 side 有一个向左浮动和内容向右浮动。

有没有很好的简单方法来实现这一目标？

4

2 回答 2

1

HTML

<div id="main">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

CSS

#main{
    width: 980px;
    margin: 0 auto;
}
#main:after{
    content: '';
    display: block;
    clear: both;
}
#sidebar{
    float: left;
    width: 200px;
}
#content{overflow: hidden;}
于 2013-09-23T10:08:56.177 回答
1

这是一个Fiddle，它显示了两种情况：一种带有侧边栏，另一种没有侧边栏。

要记住的一件事是，无论内容如何，display: block​​属性都可以使元素具有所有可用宽度。这就是它的.content作用 -float: left如果存在，它会出现在侧边栏旁边，并填充所有可用空间。

HTML

<div class="parent">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

<br>

<div class="parent">
    <div class="content">Content</div>
</div>

CSS

.parent {
    border: 1px solid;
    margin: 0px auto;
    height: 100px;
    width: 300px;
}

.sidebar {
    height: 100%;
    width: 100px;
    float: left;
    background: rgb(255, 176, 176); /* Light Red */
}

.content {
    height: 100%;
    background: rgb(148, 148, 255); /* Light Blue */

}
于 2013-09-23T10:44:23.820 回答