如何在调整大小后将连续的 4 张图片（带标题）变成 2x2 网格
How to turn 4 pictures (with captions) in a row into a 2x2 grid after resize
编辑来自 Bastian 的代码笔：https://codepen.io/Bastian2001/pen/GRoGrrY
我制作了一个网页，其中连续放置了 4 张高大的图片，并在下方添加了说明文字。在 window 宽度减小到某个 px 大小后，我试图让图像堆叠成带有标题的 2x2 方形网格。
我尝试将图像块设置为占据宽度的 50%，但我很确定我没有正确使用它，因为位置非常混乱。
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
}
字幕的宽度和高度也变得异常，并且在某些 window 尺寸下没有正确排列。我尝试使用@media 来编辑字体大小，但似乎也不起作用。
最后，在全屏模式下，当某些字幕有更多文本行时，图像不会水平排列。
对所有问题和代码的粗糙表示歉意。
在此先感谢您的帮助！
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
color: black;
letter-spacing: .18em;
min-width: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/* This section is for the services page */
.gmSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.propSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.fluidSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.sandSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.imgServicesContainer {
text-align:center;
margin-top: 30px;
display: inline;
}
.imgServicesBlock {
width: 20vw;
Height: 35vw;
/*max-height: 500px;*/
/*max-width: 300px;*/
max-height: 450px;
max-width: 220px;
display: inline-block;
margin-right: 22px;
margin-left: 22px;
object-fit: cover;
background-color:red;
transition: transform .2s;
}
.imgServicesBlock:hover {
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
.imgServices {
width: 100%;
height: 100%;
border-style: solid;
border-color: white;
border-width: 5px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
/*This bit removes the cakes in the name if the window is too small"*/
@media (max-width: 700px) {
.edit-name{
display: none;
}
}
/*Removes the tel and email when window is narrow */
@media (max-width: 1230px) {
.narrow-hide{
display: none;
}
}
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
Height: 35vw;
max-height: 200px;
max-width: 200px;
display: inline-block;
margin-right: 22px;
margin-left: 22px;
object-fit: cover;
transition: transform .2s;
font-size: 5px;
}
}
@media (max-width: 420px) {
.imgServicesBlock {
width: 50%;
Height: 35vw;
max-height: 20px;
max-width: 20px;
display: inline-block;
margin-right: 11px;
margin-left: 11px;
object-fit: cover;
transition: transform .2s;
font-size: 3px;
}
.propSectionText {
font-size: 3px;
}
}
HTML
<div id="fullpage">
<section class="vertical-scrolling" style="background-color: #f5f5f5";>
<h3 style="display:block; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom: 20px; overflow-wrap: anywhere; width: 690px; color:#808080">OUR SERVICES</h3>
<p style="color:#808080; margin-bottom:40px; font-size: 25px; word-wrap: break-word;">Click on the images below to learn more about our services<p>
<div class="imgServicesContainer">
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="gmSectionText">
<p>blah blah here here and you</p>
</div>
</a>
</div>
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="propSectionText">
<p>words and things are good to type to fill in the silence</p>
</div>
</a>
</div>
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="fluidSectionText">
<p>dogs are great to walk and pet. Awesome! I have 4 and also a parrot.</p>
</div>
</a>
</div>
<div class="imgServicesBlock" style="margin-right: 50px;">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="sandSectionText">
<p>hi and there text to sample</p>
</div>
</a>
</div>
</div>
</section>
</div>
!!!!编辑来自 Bastian 的代码笔：https://codepen.io/Bastian2001/pen/GRoGrrY
您正在努力实现的工作示例：https://codepen.io/Bastian2001/pen/qBbKRXV
CSS 网格可以提供帮助 ()
在你的媒体查询中，你必须将父级的 grid-template-column 属性 设置为 2（媒体查询之外的值为 4），允许你所追求的这种行为.
编辑来自 Bastian 的代码笔：https://codepen.io/Bastian2001/pen/GRoGrrY
我制作了一个网页，其中连续放置了 4 张高大的图片，并在下方添加了说明文字。在 window 宽度减小到某个 px 大小后，我试图让图像堆叠成带有标题的 2x2 方形网格。
我尝试将图像块设置为占据宽度的 50%，但我很确定我没有正确使用它，因为位置非常混乱。
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
}
字幕的宽度和高度也变得异常，并且在某些 window 尺寸下没有正确排列。我尝试使用@media 来编辑字体大小，但似乎也不起作用。
最后，在全屏模式下，当某些字幕有更多文本行时，图像不会水平排列。
对所有问题和代码的粗糙表示歉意。
在此先感谢您的帮助！
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
color: black;
letter-spacing: .18em;
min-width: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/* This section is for the services page */
.gmSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.propSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.fluidSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.sandSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.imgServicesContainer {
text-align:center;
margin-top: 30px;
display: inline;
}
.imgServicesBlock {
width: 20vw;
Height: 35vw;
/*max-height: 500px;*/
/*max-width: 300px;*/
max-height: 450px;
max-width: 220px;
display: inline-block;
margin-right: 22px;
margin-left: 22px;
object-fit: cover;
background-color:red;
transition: transform .2s;
}
.imgServicesBlock:hover {
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
.imgServices {
width: 100%;
height: 100%;
border-style: solid;
border-color: white;
border-width: 5px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
/*This bit removes the cakes in the name if the window is too small"*/
@media (max-width: 700px) {
.edit-name{
display: none;
}
}
/*Removes the tel and email when window is narrow */
@media (max-width: 1230px) {
.narrow-hide{
display: none;
}
}
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
Height: 35vw;
max-height: 200px;
max-width: 200px;
display: inline-block;
margin-right: 22px;
margin-left: 22px;
object-fit: cover;
transition: transform .2s;
font-size: 5px;
}
}
@media (max-width: 420px) {
.imgServicesBlock {
width: 50%;
Height: 35vw;
max-height: 20px;
max-width: 20px;
display: inline-block;
margin-right: 11px;
margin-left: 11px;
object-fit: cover;
transition: transform .2s;
font-size: 3px;
}
.propSectionText {
font-size: 3px;
}
}
HTML
<div id="fullpage">
<section class="vertical-scrolling" style="background-color: #f5f5f5";>
<h3 style="display:block; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom: 20px; overflow-wrap: anywhere; width: 690px; color:#808080">OUR SERVICES</h3>
<p style="color:#808080; margin-bottom:40px; font-size: 25px; word-wrap: break-word;">Click on the images below to learn more about our services<p>
<div class="imgServicesContainer">
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="gmSectionText">
<p>blah blah here here and you</p>
</div>
</a>
</div>
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="propSectionText">
<p>words and things are good to type to fill in the silence</p>
</div>
</a>
</div>
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="fluidSectionText">
<p>dogs are great to walk and pet. Awesome! I have 4 and also a parrot.</p>
</div>
</a>
</div>
<div class="imgServicesBlock" style="margin-right: 50px;">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="sandSectionText">
<p>hi and there text to sample</p>
</div>
</a>
</div>
</div>
</section>
</div>
!!!!编辑来自 Bastian 的代码笔：https://codepen.io/Bastian2001/pen/GRoGrrY
您正在努力实现的工作示例：https://codepen.io/Bastian2001/pen/qBbKRXV
CSS 网格可以提供帮助 (
在你的媒体查询中，你必须将父级的 grid-template-column 属性 设置为 2（媒体查询之外的值为 4），允许你所追求的这种行为.