浮动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"。是否有可能将的宽度设置为的全尺寸（300像素）？

- Mironline

---

当您在div2上设置display:none时，为什么不同时将div1的宽度设置为auto或width:100％？（也许还要设置float:none） - jmbertucci

@jmbertucci，.div2是在运行时生成的。我正在寻找基于CSS的解决方案。 - Mironline

你是要添加一个设置display:none的类，还是要直接添加display:none内联样式？ - João Paulo Macedo

你使用什么编程语言？div2是如何生成的？因为像jmbertucci所说，同时向div1添加类或任何样式最容易... - Chris

我正在使用 MVC 3，并将 .div2 设为部分。 - Mironline

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;}

- Eric

Answer 2

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

只需取消display:none上的注释即可看到它的效果。

- Jimmy Breck-McKye

Answer 3

尝试在将 display: none 设置为时，向 div2 添加类（例如，hidden），然后对于定义了 width: 300px 的 div1 设置 fullwidth。最后，您可以使用 jQuery 和条件语句进行操作：

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

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

我想不到任何其他解决方案，因为CSS不允许条件语句。

- Tomek Buszewski

---

那么使用 CSS 没有解决方案吗？ - Mironline

就像我之前所说，CSS本身不支持条件语句。因此，你可能需要使用jQuery（或者使用纯JS）。另外一个选项是，如果你在服务器端维护这些div，你可以在PHP中编写条件语句。 - Tomek Buszewski

我会使用Tomek的addClass方法。在CSS中设置样式，在JS中设置操作是一个好的实践。 - Edditoria