html - 当其他元素消失时，div元素占据所有宽度

Question

我创建了两个 DIV 元素。这两个 DIV 元素将仅在一个页面中，而在所有其他页面中将只有一个 DIV 元素。当第二个元素消失时，第一个元素自动占据所有宽度。抱歉，我还不能添加图片，但我会尝试创建一个示例：

[div 元素“一”] 宽度：50% [div 元素“二”] 宽度：50%

*div 元素“二”消失

[div 元素“一个”] 宽度 100%

我怎么会这样？使用简单的 CSS/HTML，我无法达到图像中的结果。* 我不能改变 DIV 元素的类

score 2 · Accepted Answer

您可以根据父容器类设置 div 样式：

第 1 页：

<body class="twocolumn">
  <div id="div1">foo</div>
  <div id="div2">bar</div>
</body>

第2页：

<body class="singlecolumn">
  <div id="div1">foo</div>
</body>

css 文件：

.twocolumn #div1 { width: 50%; }
.singlecolumn #div1 { width: 100%; }
#div2 {width: 50%; }

score 1 · Accepted Answer

像这样写：

HTML

<div class="two">two</div>
<div class="one">one</div>

CSS

.two{
    background:red;
    float:right;
    width:50%;
}
.one{
    background:green;
    overflow:hidden;
}

或者

您可以为此使用display:table属性。

它的工作直到 IE8 及更高版本。

2 回答 2