CSS中心响应DIV

Question

您在图像1中看到的"图块"(白色框)响应用户屏幕.如果屏幕尺寸不够大,则会在右侧留下间隙.我想要做的是实现如图2所示的结果.到目前为止,我的代码是针对这些特定元素的.

HTML:

<div class="main">
    <div class="inner">
        <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
    </div>
</div>

CSS:

.main{
    width:100%;
    background: #000;
}

.main .inner{
    margin:10px;
    min-width: 140px;
    background: red;
}

.main .inner .tile{
    margin:10px;
    height: 120px;
    width: 120px;
    background: #fff;
    display: inline-block;
}

图片1:

图片2:

Answer 1

您可以使用媒体查询来设置.inner各种浏览器宽度的类的宽度,然后将margin-left和margin-right属性设置auto为居中.设置padding-top与padding-bottom该属性.main类,而不是在设置上下页边距.inner类.使用组合padding的.inner类border的.tile类空间瓷砖出均匀10px分开.

有关媒体查询的详细说明:CSS媒体查询

例

CSS

.main{
    width: 100%;
    background: #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main .inner{
    padding: 5px;
    font-size: 0px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

.main .inner .tile{
    margin: 0px;
    padding: 0px;
    border: 5px solid red;
    height: 120px;
    width: 120px;
    background: #fff;
    display: inline-block;
}

为每个浏览器宽度设置媒体查询,在此示例中,我只增加了800px,但您可以根据需要添加更多.

css(续)

@media (min-width: 280px) {
    .main .inner{
        width: 130px;
    }
}

@media (min-width: 320px) {
    .main .inner{
        width: 260px;
    }
}

@media (min-width: 480px) {
    .main .inner{
        width: 390px;
    }
}

@media (min-width: 640px) {
    .main .inner{
        width: 520px;
    }
}

@media (min-width: 800px) {
    .main .inner{
        width: 780px;
    }
}

媒体查询用于将宽度设置.inner为多个,130px其宽度为a .tile的边框10px.

如果你想改变的瓷砖之间的间隔,你需要改变border的.tile课,padding在.inner课堂上,margin-top并margin-bottom在.main阶级和width被各媒体查询的规定.