左浮動divs問題

Question

我有兩個問題左浮動div內的父div。我花了超過5個小時在這嘗試了不同的東西，在互聯網上搜索，但無法找到解決方案！認爲這裏有人可能會有幫助。

這是該方案：

<div id="parent_div"> 
<div class="left_floating" style="height:20px; width: 100%; clear:left;"><label style="text-align:center"> This is the title div </label></div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div> 
<div class="left_floating" style="height:20px; width:50px;"> 2 </div> 
<div class="left_floating" style="height:20px; width:50px;"> 3 </div> 
</div> 

問題1： 我想要什麼：標題是在其他三個div的中心，無論在屏幕尺寸的所有的時間/。 發生了什麼： 如果縮小屏幕的大小，在沒有足夠空間的情況下，div 3會下降（這是我想要的），但是在右側會留下一些空白div 2使父div的寬度大於100px（div 1的寬度+ div 2的寬度），也就是說，父div不會從兩側緊張。這使得標題不在中心。我怎樣才能解決這個問題？

問題2： 我想要什麼：當屏幕縮小並且div 3下降時，它應該在div 1之下。 發生了什麼：div 3在div 2下面，因爲div 2的高度小於div 1的高度。請注意，如果div 2的高度大於div 1的高度，則結果將是理想的結果。有什麼建議麼？

我更喜歡css解決方案，如果有的話。

謝謝

Answer 1

你可以通過使用媒體查詢來實現你想要的。以下是使用您提供的標記的示例：http://jsfiddle.net/VQMrY/1/

請注意我做出的CSS更改：使標籤成爲塊元素和媒體查詢（基於屏幕寬度顯示結果）。我在元素周圍放置了邊框，以便更容易看清楚。我還在父容器中添加了一個clr類。

在媒體查詢中，我將div'2'設置爲向右浮動，因此您沒有該差距，然後'3'清除兩者，因此它將低於'1'。希望這有助於！

@media screen and (max-width: 3550px) { 
.second {float: right;} 
.third {clear: both;} 

}

只需編輯最大寬度到要發生在斷點處什麼。

Answer 2

關於問題1：您可能想要通過媒體查詢解決此問題。這聽起來像是在某些決議中，你希望CSS具有不同的行爲方式，這是媒體查詢所擅長的。你可能會希望沿着

@media (max-width: n px) { 
    #parent_div { 
     width: 100px; 
    } 

@media (min-width: n+1 px) { 
    #parent_div { 
     width: 150px; 
    } 

對於問題2線的東西：你可以創建一個div來包裝DIV 2，給它一個更大的靜態高度，DIV 3彩車適當。只要讓包裝浮動，div 2不浮動。

<div id="parent_div"> 
<div class="left_floating" style="height:20px; width: 100%; clear:left;"> 
    <label style="text-align:center"> This is the title div </label> 
</div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div> 
<div style="float:left; height:50px; width:50px;"> 
    <div class="left_floating" style="float:none; height:20px; width:50px;"> 2 </div> 
</div> 
<div class="left_floating" style="height:20px; width:50px;"> 3 </div> 
</div>