当其他元素消失时,Div元素占用所有宽度

时间:2012-08-27 08:38:26

标签: html css

我创建了两个DIV元素。那些两个DIV元素只会在一个页面中,而在所有其他页面中只有一个DIV元素。 当第二个元素消失时,第一个元素自动占据所有宽度。 对不起,我还无法添加图片,但我会尝试创建一个示例:

  

[div element“one”] width:50%[div element“two”] width:50%

* div元素“two”消失

  

[div element“one”] width 100%

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

2 个答案:

答案 0 :(得分:2)

您可以根据父容器类设置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%; }

答案 1 :(得分:1)

像这样写:

<强> HTML

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

<强> CSS

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

选中此http://jsfiddle.net/gJ22P/

您可以使用 display:table 属性。

选中此http://jsfiddle.net/gJ22P/1/

直到IE8&amp;上方。