自動寬度浮動的div

是我在某些情況下，我需要設置爲display:none代碼div2自動寬度浮動的div

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

。是否有可能.div1寬度設置爲.content（300像素）

2012-06-10 Mironline

當你在'div2'上設置'display：none'時，爲什麼不同時設置'width：auto'或'width：100％'爲'div1'？（也許'float：none'） – jmbertucci

@jmbertucci，.div2在運行時生成。我正在尋找基於css的解決方案。 – Mironline

您是否添加了設置顯示的類：無，或者您是否添加了顯示：無內聯？ – banzomaikaka

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

2012-06-10 15:43:32 Eric

中設置css和actions中的樣式是一個很好的練習。 – Mironline

嘗試的全尺寸，當你設置display: none添加類（例如，hidden），以div2，然後設置fullwidth做div1（您在其中定義width: 300px）。最後，您可以使用jQuery和條件：

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

當然，您可能想要將這些類名更改爲更具體的類名。

我想不出任何不同的解決方案，因爲CSS不允許條件語句。

2012-06-10 14:29:08

，所以沒有使用css的解決方案？ – Mironline

就像我說過的，CSS本身不支持條件語句。所以可能想要堅持jQuery（或者在純JS中做）。還有一個選擇是，如果您在服務器端維護這些div，則可以使用PHP編寫條件語句。 –

我會使用Tomek的addClass方法。在js – Edditoria

只要你只需要添加或刪除第二個div，最簡單的方法是隻做出第二個div float，並且將它放在第一個非浮動div中，如下所示：http://jsfiddle.net/Tb89A/。

只要刪除顯示屏上的評論：無看到它在行動。

2012-06-10 16:37:23

回答