浮动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。是否可以将.div1宽度设置为.content（300px）的全尺寸

Answer 1

重新排序您的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;}

Answer 2

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

只需删除display：none上的注释即可查看其中的操作。

Answer 3

设置hidden然后设置div2执行display: none（您在其中定义）时，尝试将类（例如，fullwidth）添加到div1 width: 300px）。最后，你可以使用jQuery和conditionals：

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

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

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