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响应式网格，调整大小并正确填充宽度

回答

相关问题