Question

我想拥有它，所以当我的页面调整大小时，'blocks'会自动进入彼此之下，这样他们可以完美地适应页面，但是当他们下拉'main'时他们也会调整大小，所以有没有留在右侧的空间，所以看起来还不错？

非常感谢你的帮助！

HTML

<html>
    <head>
        <!-- css -->
        <link rel="stylesheet" type="text/css" href="main.css">
        <title></title>
    </head>
    <body>
        <div class="main">
                <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 class="box"></div>
                <div class="box"></div>
        </div>
    </body>
    </html>

CSS

body
{
    background-color: #000;
}

.main
{
    width: 90%;
    height: 1000px;
    background-color: #fff;
    margin-right: auto;
    margin-left: auto;
    margin-top: 75px;
    margin-bottom: 75px;
}

.box
{
    width: 200px;
    height: 300px;
    background-color: #000; 
    position: relative;
    left: 10px;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
}

Answer 1

没有办法归档＆＃34;收缩适合＆＃34;内部浮点数或display: inline-block所需的行为。

但是有很多媒体查询@media all and (max-width: xxx)的解决方法。

请参阅http://jsfiddle.net/QvAwa/1/

如果要覆盖更高的屏幕宽度，则必须扩展媒体查询的数量。

这适用于IE9 +，FF3.5 +，Chrome4 +

调整页面大小时，将div块保留在页面中心

HTML

CSS

1 个答案: