爲靈敏度高的容器設計響應式設計

我試圖讓我的網站響應，而且我在創建容器divs的時候遇到了麻煩，因爲他們的高度響應了它們的內容。我嘗試將高度設置爲100％，但不起作用。爲靈敏度高的容器設計響應式設計

當我調整瀏覽器的大小時，大多數內容塊都在彼此之下流動，但容器並未擴展以適合它們。

有誰知道我有什麼錯fundamentaly如何在頁面構建了一個阻止我acheiving呢？

乾杯。

2013-12-20 Ciarán

您需要清除浮標。一個例子是.mission-statement。當div中有多個div浮動時，容器會自動崩潰。在你的情況下，它只是部分崩潰，因爲你有一個最小高度集。

你做這樣的事情就這樣輕鬆：

.mission-statement:after { 
    clear: both; 
    display: table; 
    content: ''; 
}

影響到所有的div你可以改變.mission-statement:after到div:after

2013-12-20 20:36:14 brouxhaha

哇，完美的工作！一直試圖解決這個問題，並認爲我需要重組頁面來修復它謝謝你！ –

圖像將自動獲得相對於圖像的100％的高度寬度和百分比標記是瀏覽器窗口的百分比。你可能想要的是一個寬度標籤，可能是max-width = * px，並讓高度由圖像本身決定。

2013-12-20 20:37:39

好吧，這將解決我與圖像感謝您的意見問題！ –

而不是讓我給你寫一個答案，我會參考一個非常好的線程。無論如何，解決方案是一種叫做clearfix的東西。

2013-12-20 20:40:53 dotarmin

乾杯我會讀這個反正謝謝。 –

回答