Question

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

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

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

总宽度为980px

但是在其中一些页面上，我没有使用侧边栏，所以左边有空白区域。如果没有侧边栏，让内容页面向左流动，我怎么解决这个问题呢？

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

我有以下html结构

我给了旁边和内容div一个固定的宽度，并且旁边有一个浮动，内容是浮动的。

有没有很好的方法来实现这个目标？

Answer 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;}

Answer 2

这里有一个 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 */

}

为内容创建动态增长宽度

2 个答案:

HTML

CSS