jquery - html/css 响应式网格,可正确调整大小和填充宽度

原文 标签 jquery html css

我确信这个问题有一个简单的答案,我把它复杂化了!如果是我,那我提前道歉!

我想要一个填充容器 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">&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 和许多插件,还具有各种其他功能。

我试图实现的唯一功能是子 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%;
}  

不要使用显示内联 block ,因为您的框之间总会有额外的边距,这会弄乱您的宽度。 float 是更好的选择。

如果您使用“%”,那么如果您想要完美的结果,则不应使用像素边距(因为您的框总是填充容器的 100%)

FIDDLE

关于jquery - html/css 响应式网格,可正确调整大小和填充宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28345811/

相关文章:

css -::moz-selection不适用于输入元素

php - 奇怪的SQL和javascript ajax错误

html - 删除堆叠的上下框之间的间隙

Jquery 触发点击不适用于 Mac、Ipad 和 Iphone 中的 Safari 浏览器

javascript - 如何在jquery中通过href获取元素?

html - html页面上div显示的方向

html - CSS:我不会在ul内部居中

javascript - 带有复选框黑客的下拉菜单 - 如何在不选择选项的情况下首次点击打开菜单?

javascript - 如何使用<input>创建数组?

.append 后的 jQuery 函数