CSS 中心响应式 DIV

Question

您在图片 1 中看到的“图 block ”(白框)响应用户屏幕。如果屏幕尺寸不够大，它会在右侧留下一个空隙。我想要做的是实现如图 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 使其居中。设置 .main 类的 padding-top 和 padding-bottom 属性，而不是在 .inner 上设置上下边距 类。结合使用 .inner 类上的 padding 和 .tile 类上的 border 来分隔图 block 均匀 10px 分开。

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

example

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 的倍数，这是 .tile 的宽度10px 的边框。

如果你想改变瓷砖之间的间距，你需要改变 .tile 类上的 border，padding .inner 类，.main 类和 上的 margin-top 和 margin-bottom >宽度在每个媒体查询中指定。