html - 带 float 的动态 1 或 2 列布局

Question

我有一个问题，我想不通。

我有两个 div:侧边栏 (30%) 和内容 (70%)。

我的 HTML 和 CSS 看起来像这样:

HTML

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

CSS

#main {
width: 100%
}
#content {
    float: left;
    width: 70%;
}
#sidebar {
    float: right;
    width: 30%;
}

根据内容或页面，#sidebar 不包括在内。在那些情况下，我希望#content 填充 100% 而不是 70%。

有没有办法实现这一点？

谢谢!

Answer 1

我看到的唯一纯 CSS 解决方案是使用不同的视口(viewport)。例如，如果您不想在移动设备上看到侧边栏，请使用

设置第二个样式表

#content{width:100%}
#sidebar{display:none}

否则，将备用 CSS 集成到您正在使用的任何服务器端系统中，或者如果您需要使用 <style>，则在 header 中抑制它。标签。