Question

我有两行彼此相邻的6张图片。我使用了一个css容器来使它居中（无法使用填充）。但是当我缩小屏幕时，因为边距是自动的，所以容器会与容器周围的空白区域相对收缩。你可以看到这个here。蓝色就在那里展示容器。图像需要保持该顺序，直到它们在物理上不可能留在那里。任何帮助，将不胜感激！先谢谢你了！

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Featured Industries</title>
    </head>
<style>
.center {
    margin: auto;
    width: 66%;
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}
.img {
        float: left;
}
a:hover img {
position: relative;
z-index: 1;
transition: -webkit-box-shadow 0.3s ease-in-out;
-webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);

}
</style>

Answer 1

您的容器大小为％，这意味着，在这种情况下，它将始终是与窗口宽度匹配的文档宽度的66％，这就是更改窗口大小时收缩的原因。如果将容器宽度设置为图像宽度的两倍，则不会缩小。

因此，根据您的示例，这将起作用：

.center {
    margin: auto;
    width: 622px; /* (311 x 2) */
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}

现在，当他们不适合在窗户中时，你必须解决另一个问题，例如在手机中。然后你可以使用css media queries。所以，现在让我们为2图像列没有空间时添加另一条规则。

/* This is the default behavior (mobile first) */
.center {
    margin: auto;
    width: 311px; /* 1 column by default */
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}

/* Let's now modify the container size when there is space */
/* for 2 image columns */
@media screen and (min-width: 622px) {
    .center {
        width: 622px; // 1 column by default
    }
}

Answer 2

使用此课程：

.center {
    margin: auto;
    width: 933px;
    height: 625px;
    border: 3px solid #0026E3;
    padding: 0px;
}

如果将宽度设置为66％，则取决于父宽度，如果您将其设置为px，则位将保持相同的大小

如何保持css容器的大小相同？

2 个答案: