簡單的響應與兩個盒子？

我下面舉個例子：http://jsfiddle.net/dwDZx/10/簡單的響應與兩個盒子？

HTML

<div id="container"> 
    <div id="div1" class="regularContainer"> 
     <div>one</div> 
    </div> 
    <div id="div2" class="regularContainer"> 
     <div>two</div> 
    </div> 
</div>

CSS

* { 
    margin:0; 
    padding:0; 
} 

#div1 { 
    float:left; 
    margin-right:2%; 
    margin-bottom:10px; 
    max-width:300px; 
    width:47%; 
    background-color:#d3edff; 
    border-color:#00b5ff; 
    padding-bottom:8px; 
} 

#div2 { 
    float:left; 
    max-width:300px; 
    width:47%; 
} 

.regularContainer { 
    float:left; 
    padding:7px; 
    background-color:#fff; 
    border:1px solid #00b5ff; 
    width:784px; 
}

的問題在於，盒沒有調整，直到第二箱FALS下來一排？我需要的是盒子總是調整大小，永遠不會掉下來。

這怎麼辦？

來源

2012-12-22 Ivy

爲什麼不使用Twitter Bootstrap？這對響應式設計非常有用。它有類容器流體，排液，spanxx，這將解決您的問題。

來源

2012-12-22 10:23:00 asgoth

我以前聽說過這個recomendation，是有什麼缺點我應該知道自舉vs手動響應（css）？ – Ivy

如果我爲px大小的桌面構建我的站點，稍後可能會應用bootstrap以使頁面響應？ – Ivy

是的，你可以，但爲此，你必須根據引導框架將更改應用到頁面，以使其響應。 – pkachhia

只使用百分比，它會變成響應。

這裏是響應http://jsfiddle.net/dwDZx/11/

我改變寬度45％，填充至1％，從之前的

* { margin: 0; padding: 0; } 

#div1 
{ 
    float:    left; 
    margin-right:  2%;   
    margin-bottom:  10px; 
    max-width:   300px; 
    width:    45%; 
    background-color: #d3edff; 
    border-color:  #00b5ff; 
    padding-bottom:  8px; 
} 

#div2 
{ 
    float:    left; 
    max-width:   300px; 
    width:    45%; 
} 

.regularContainer 
{ 
    float:      left; 
    padding:     1%; 
    background-color:   #ffffff; 
    border:      1px solid #00b5ff; 
    width:      784px; 
}

來源

2012-12-22 10:24:38 Codler

2 + 45 + 45 + 1 + 1 = 94％其中是7％？如果我將寬度設置爲48％，那麼我們總共可以獲得100％的第二個div將連續跳躍？ – Ivy

它是，1（填充）+45（寬度）+1（填充）+2（餘量）+1（填充）+45（寬度）+1（填充）= 96％ – Codler

爲什麼不使它成爲100％？ – Ivy

簡單的響應與兩個盒子？

回答

相關問題