如何在容器中浮動4個響應式div？

我正在構建一個響應站點，並且遇到了浮動容器的問題。我希望它有四個直接相鄰的div，沒有間隙，沒有div在較小的屏幕/窗口上移動到新的位置。我嘗試了各種各樣的技術，但這些技術似乎都不起作用。容器的最大尺寸應爲960px×460px，因爲每個div的高度均爲460px，合併寬度總計爲960px。如何在容器中浮動4個響應式div？

來源

2014-12-04 Lance Hayley

請告訴我們你試過的代碼。 – j08691 2014-12-04 15:28:28

我試過多種方法，但找不到合適的人...... 我有四個項目：1 - 圖片460x85px 2 - Ifram /動畫460x537px 3 - PHP的聯繫表格460x255px 4 - 圖片460x85px 我試圖讓它們全部適合一個並排的460x960px的矩形，所以它們看起來像是一個無縫的矩形。我需要它們根據幀大小進行調整以保留在矩形中。 – 2014-12-05 12:37:03

下面有幾個選項可以做到這一點。您只需將圖片/內聯框的最大寬度設置爲100％，以便它們隨容器一起縮小。 – Patrick 2014-12-05 18:29:02

嘗試一下font-size黑客：http://jsfiddle.net/andunai/bbek5rq6/

或者使用引導。

刪除空格的想法是將這些空格的font-size設置爲0px。

來源

2014-12-04 15:34:22

您可能需要使用網格框架，以緩解響應佈局的發展：

是我比較喜歡的Jeet的前處理器框架可以與Stylus或SCSS一起使用。

來源

2014-12-04 15:40:43

我同意使用框架會讓你的生活更輕鬆。要回答你的問題，最簡單的解決方案是爲父級設置最大寬度，然後爲子級使用百分比。

HTML

<div class="wrapper"> 
    <div class="quarter red"> 
    </div> 
    <div class="quarter green"> 
    </div> 
    <div class="quarter blue"> 
    </div> 
    <div class="quarter"> 
    </div> 
</div>

CSS

.wrapper {max-width:960px;} 
.quarter {width:25%;height:460px;background:#EEE;float:left;} 
.red {background:#990000;} 
.green {background:#006600;} 
.blue {background:#333366;}

您可以查看該代碼在這裏工作：http://codepen.io/anon/pen/KwdjXo

更新codepen與佔位符圖片：http://codepen.io/anon/pen/LEGNYe

來源

2014-12-04 15:44:41 Patrick

你有沒有考慮超整齊flex佈局？

.wrap { 
 
    max-width: 960px; 
 
    height: 460px; 
 
    display: flex; 
 
} 
 
.wrap div { 
 
    flex: 1; 
 
}

<div class="wrap"> 
 
    <div style="background:red"></div> 
 
    <div style="background:blue"></div> 
 
    <div style="background:lime"></div> 
 
    <div style="background:cyan"></div> 
 
</div>

來源

2014-12-04 15:50:32 Leo

如何在容器中浮動4個響應式div？

回答

相關問題