html/css響應式網格，調整大小並正確填充寬度

我相信這個問題有一個簡單的答案，並且我將這個複雜化！如果我是，那麼我提前道歉！html/css響應式網格，調整大小並正確填充寬度

我想要一個div網格填充容器div的寬度。說8個div塊，4行兩列，每個父div有25％。

在調整寬度的大小時，div的寬度應該縮小（固定高度），直到達到最小寬度。該div應該包裝/浮動成爲三排3，3和2.

我有這一切工作正常。我的簡化代碼如下：

<html> 

<head> 
<title>test</title> 
</head> 

<style> 
.container { 
width: 90%; 
} 
.box { 
margin: 10px; 
width: 22%; 
min-width: 200px; 
max-width: 22%; 
height: 300px; 
background: #ff0000; 
display: inline-block; 
} 
</style> 

<body> 

<div align="center"> 
<div class="container"> 

<div class="box">&nbsp;</div> 
<div class="box">&nbsp;</div> 
<div class="box">&nbsp;</div> 
<div class="box">&nbsp;</div> 
<div class="box">&nbsp;</div> 
<div class="box">&nbsp;</div> 

</div> 
</div> 

</body> 
</html>

的問題是，從4列各跳躍以3比2比1，的div留在它們的最小寬度和不再補全父寬度。

我想要實現的是divs將始終填充父寬度。

到目前爲止，我發現的任何解決方案都是大量複雜的jquery和許多插件，還有各種各樣的其他功能。

我想要實現的唯一功能就是這個子div的流體寬度。

我目前使用的是HTML和CSS，但使用jquery或其他解決方案，但不想使用html5或css3。

來源

2015-02-05 Richard

您可以使用引導插件使用的利潤率以像素爲單位輕鬆實現這一點。請參閱這些鏈接http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp和http://getbootstrap.com/2.3.2/scaffolding.html – 2015-02-05 13:58:45

保證使用最大寬度爲你想要的效果我會使用一些非常簡單的媒體查詢。

基本上，當窗口達到你想要的寬度時，你可以改變你的盒子的寬度，你可以使用任意數量的步驟。

這樣的：

.box { 
    width: 25%; 
    height: 300px; 
    background: #ff0000; 
    float:left; 
    box-sizing: border-box; 
    border:1px solid white;   
} 

@media only screen and (max-width: 800px) { 
.box { 
    width: 33%; 
} 
@media only screen and (max-width: 600px) { 
.box { 
    width: 50%; 
} 

@media only screen and (max-width: 400px) { 
.box { 
    width: 100%; 
}

不要使用顯示inline-block的，你將永遠有你的箱子，會搞亂你的寬度之間有餘量。浮動是更好的選擇。

如果使用「％」，那麼你shoudn't如果你想完美的結果（如您的箱子填充始終容器的100％）

FIDDLE

來源

2015-02-05 14:53:32

-1

Bootstrap使響應非常容易。檢查bootstrap在這裏：http://getbootstrap.com/getting-started/

來源

2015-02-05 14:06:30 oxmolol

html/css響應式網格，調整大小並正確填充寬度

回答

相關問題