gpt4 book ai didi

html - 如何保持 CSS 容器大小相同?

转载 作者:太空宇宙 更新时间:2023-11-04 08:55:07 26 4
gpt4 key购买 nike

我有 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>

最佳答案

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

因此,根据您的示例,这将起作用:

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

现在您必须解决另一个问题,当它们不适合 window 时,例如在手机中。然后你可以使用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 */
}
}

关于html - 如何保持 CSS 容器大小相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43163372/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com