html / css响应网格,可以正确调整宽度和填充宽度

时间:2015-02-05 13:57:01

标签: jquery html css

我确信这个问题有一个简单的答案,而且我过于复杂了!如果我,那么我提前道歉!

我想要一个填充容器div宽度的div网格。假设8个div块,分为两行,每行4个,每个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和许多插件,还可以执行各种其他功能。

我想要实现的唯一功能就是这个子div的流畅宽度。

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

2 个答案:

答案 0 :(得分:0)

对于你想要的效果使用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%;
}  

不要使用显示内联块,因为在你的盒子之间总会有额外的边距会弄乱你的宽度。 Float是更好的选择。

如果您使用&#34;%&#34;如果你想要完美的结果(因为你的盒子总是填充容器的100%),你就不要使用像素边距

FIDDLE

答案 1 :(得分:-1)

Bootstrap使响应非常简单。 检查bootstrap:http://getbootstrap.com/getting-started/