我确信这个问题有一个简单的答案,但我把它复杂化了!如果我是,那么我提前道歉!
我想要一个填充容器 div 宽度的 div 网格。比如说 8 个 div block ,分成两行,每行 4 个,每个父 div 占 25%。
在缩小宽度时,div 的宽度(固定高度)应该缩小,直到达到最小宽度。然后 div 应该换行/ float 成为三行 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"> </div>
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
</div>
</div>
</body>
</html>
问题是每次从 4 列跳到 3 到 2 到 1 时,div 都保持其最小宽度,不再填充整个父级宽度。
我想要实现的是 div 将始终填充父宽度。
到目前为止,我发现的任何解决方案都过于复杂,包含 jquery 和许多插件,还包含各种其他功能。
我想要实现的唯一功能是子 div 的这种流动宽度。
我目前正在使用 html 和 css,但可以使用 jquery 或其他解决方案,但不想使用 html5 或 css3。
最佳答案
我会使用一些非常简单的媒体查询而不是使用 max-width 来达到你想要的效果。
基本上,当窗口达到您想要的宽度时,您可以更改框的宽度,并且您可以根据需要使用任意多的步长。
像这样:
.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%;
}
不要使用 display inline-block,因为你的框之间总是会有额外的边距,这会弄乱你的宽度。 float 是更好的选择。
如果你使用“%”,那么如果你想要完美的结果,你不应该使用以像素为单位的边距(因为你的盒子总是 100% 填充容器)
关于jquery - html/css 响应式网格,可正确调整大小和填充宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28345811/