使兩個浮動的div留下彼此相鄰

https://jsfiddle.net/ovvnnhgt/1 使兩個浮動的div留下彼此相鄰

我設計了一個網站，其響應，它看起來的jsfiddle種奇怪的（我的屏幕上至少它並不顯示最大分辨率佈局），但你可以看到這個想法。

一路縮小頁面，您會在div「側邊欄」下看到div「內容」。然後放大，你會看到內容的寬度縮小。

我的問題是我想內容div在側邊欄div的權利，而它這樣做（它看起來像側邊欄正在壓扁內容），但我無法讓它工作，無論我多麼努力，我亂七八糟與代碼一起。

最大分辨率佈局有它，所以當你改變寬度時，內容div接近邊欄div，然後我希望下一個分辨率佈局遵循這個想法，但在內容div最終變成移動友好的佈局，但同時改變寬度。

@media screen and (max-width: 1070px) { 

.contentwrap { 
width: auto; 
float: left; 
} 

}

一旦達到這個寬度我有內容浮到側面的整體，側邊欄是這樣，當我改變寬度，將其推至側邊欄，而是它這樣做幾乎完美的，它只是向下移動。

來源

2016-05-06 James Bray

你可以用flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/輕鬆做到這一點。如果您有時間，我建議您仔細閱讀此部分，以便深入瞭解https://www.youtube.com/watch?v=G7EIAgfkhmg – CZorio

謝謝，我會看一看。我必須徹底改變我的代碼嗎？我花了很多時間來處理這個佈局，並且希望找到最不成問題的方式來更改我的當前代碼以實現此目的。編輯：這看起來很有希望。之後我必須學習它。 –

這個問題的大部分答案都會引導你到Flexbox。這是CSS的未來（至少現在）。儘快適應，而不是晚些時候，這是最好的利益，它使用起來非常簡單。一旦你瞭解它，它使事情變得更容易。你不需要改變太多，但是會有變化，儘管它不值得。 – CZorio

你可以試試這個：重命名你的第二部分div contentwrap與第一部分sidebarwrap相同（http://screencast.com/t/i2GSBaiox62）。然後給你45％的sidebarwrap css寬度（http://screencast.com/t/dpQg9orW5v5r）。這是你需要的嗎？

來源

2016-05-06 20:19:36 Vcasso

不完全。由於這兩個divs之間存在巨大的白色差距，所以它不能滿足我想要的效果。謝謝你！我可能只是採用Flexbox方法。 –

可能會有幫助：有3種方法可以做到這一點。

1）您可以使用百分比。

2）您可以使用Media-Query設置每個像素。

3）您可以使用Bootstrap或Foundation框架。（我建議你這樣做）

來源

2016-05-06 21:05:23

使兩個浮動的div留下彼此相鄰

回答

相關問題