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

Question

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

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


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

Answer 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_contentdiv 大小的 CSS：

#container {
    overflow: hidden;
}

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

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

Answer 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用百分比代替。这是一个现场演示。