CSS 布局（2 列布局，但如果没有侧边栏，主列必须是 100% 宽）答案

【问题标题】：CSS layout (2 column layout, but if no sidebar main column must be 100% wide)CSS 布局（2 列布局，但如果没有侧边栏，主列必须是 100% 宽）
【发布时间】：2012-08-31 10:36:16
【问题描述】：

Column1（左）用于内容。 Column2（右侧/侧边栏）用于相关信息。说布局是 66%/34%。如果没有侧边栏内容，我需要一种方法使 Column1 自动拉伸到 100%。有任何想法吗。我知道这是可以做到的。我只是不记得怎么了。

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


+-------------------+
|Content/ no-sidebar|
+-------------------+

【问题讨论】：

标签： css layout responsive-design

【解决方案1】：

你可以试试这样的。以下是两种不同的 HTML 案例：

带侧边栏：

<div id="container">
    <div id="sidebar">some content</div>
    <div id="main_content">main content</div>
</div>

没有侧边栏：

<div id="container">
    <div id="main_content">main content</div>
</div>

这是有条件地改变main_content div大小的CSS：

#container {
    overflow: hidden;
}

#sidebar {
    width: 34%;
    float: right;
}

#main_content {
    width: 100%;
    float: left;
}
#main_content:nth-child(2) {
    width: 66%;
}

【讨论】：

【解决方案2】：

你可以像这样设置 HTML；

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

和 CSS 一样；

#container{
    width: 100%;
}
#sidebar, #content{
    height: 200px;

}
#sidebar{
    width: 200px;
    float: left;
}
#content{
    background: orange;
}

您可以将px 替换为百分比。 Here 是现场演示。

【讨论】：

@user1147371 我知道你是初学者。但是在 stackoverflow 中，用户必须接受有效的答案。您可以支持我的回答（通过单击向上箭头）并接受我的回答（通过单击对勾图标）
在内容中阻止元素，但在侧边栏中没有阻止元素，这会搞砸。使用 display: inline-block 有一些帮助，但不是全部jsfiddle.net/Nkqr3