Jquery html/css响应网格，可正确调整大小和填充宽度_Jquery_Html_Css

Jquery html/css响应网格，可正确调整大小和填充宽度

jquery html css

Jquery html/css响应网格，可正确调整大小和填充宽度,jquery,html,css,Jquery,Html,Css,我相信这个问题有一个简单的答案，我把它复杂化了！如果我是，那么我会提前道歉我希望有一个填充容器div宽度的div网格。比如说8个div块，分成两行，每行4个，每个父div占25% 向下调整宽度时，div应在宽度固定的高度上收缩，直到达到最小宽度。然后，div应该换行/浮动为3、3和2的三行这一切我都做得很好。我的简化代码如下： <html> <head> <title>test</title> </head> <style

我相信这个问题有一个简单的答案，我把它复杂化了！如果我是，那么我会提前道歉

我希望有一个填充容器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都保持其最小宽度，不再填充整个父级宽度

我试图实现的是div将始终填充父宽度

到目前为止，我发现的任何解决方案都过于复杂，使用jquery和许多插件，还可以实现各种其他功能

我试图实现的唯一特性是子divs的流体宽度

我目前正在使用html和css，但我可以使用jquery或其他解决方案，但不想使用html5或css3。

引导使响应变得非常简单。

检查这里的引导：

我将使用一些非常简单的媒体查询，而不是使用“最大宽度”来获得您想要的效果

基本上，当窗口达到您想要的宽度时，您可以更改框的宽度，并且可以使用任意多的步骤

像这样：

.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%;
}

不要使用显示内联块，因为框之间总是有额外的边距，这会弄乱宽度。浮动汇率是更好的选择

如果你使用%那么如果你想要完美的结果，你就不应该使用像素的边距，因为你的盒子总是100%的填满容器

您可以使用bootstrap插件轻松实现这一点。请参考这些链接和