css - 浮动 div 的自动宽度

Question

这是我的代码

<div class='content'>
  <div class='div1'>content</div>
  <div class='div2'>content</div>
</div>

.content { width:300px;}
.div1 { float:left;width:200px;}
.div2 { float:left;width:100px;}

在某些情况下，我需要设置display:none为div2. 是否可以将宽度设置为（ 300px ）.div1的全尺寸.content

score 2 · Accepted Answer

重新排序您的 div，并使用overflow: hidden：

<div class='content'>
  <div class='div2'>content 2</div>
  <div class='div1'>content 1</div>
</div>

.content { width:300px; overflow: hidden;}
.div1 { overflow: hidden;}
.div2 { float:left; width:100px;}

score 1 · Accepted Answer

只要您只需要添加或删除第二个 div，最简单的解决方案就是只将第二个 div 设为浮动，并将其放在第一个非浮动 div 中，如下所示：http: //jsfiddle.net/ TB89A/ .

只需删除 display:none 上的注释即可查看它的实际效果。

score 0 · Accepted Answer

尝试在设置时添加类（例如，hidden），然后设置do （在其中定义）。最后，您可以使用 jQuery 和条件：div2display: nonefullwidthdiv1width: 300px

if($('.hidden').length()) {
   $('.div1').addClass('fullwidth');
}

当然，您可能希望将这些类名更改为更具体的类名。

我想不出任何不同的解决方案，因为 CSS 不允许条件语句。

3 回答 3