Question

我正在引用的图像可以在这里看到：

我有一个Wordpress自定义字段/布局，它使用标准的功能框设置来并排显示3个框，这些框将链接到3个不同的菜单。所有3个（包括包含它们的div）都分配了相同的类。尽管所有网格类都散布着“网格”术语，但本节中没有使用CSS网格或flexbox。每个图像文件的尺寸也相同。

起初，我认为这是一个问题，第三张图像只是被前两个图像向下推，然后将其自身拉伸一点以填充一些可用空间，但是如果将窗口缩小到移动大小，则第三张图像仍会保留不同的比例。当我将包含的父div设置为最大宽度为30％时，也是如此。所有3张图像都显示在同一行上，但第三张图像仍比其高。

关于第三张图片为何变得流氓的任何想法？

（注意：当我在布局中添加第4个框时，它会在流氓框下方显示在新行中，但大小和比例与第2个框相同。）

/**/
/* menus grid */
/**/
.menus-grid {
	position: relative;
	margin-bottom: 4rem;
	text-align: center;
}
.menus-grid__head {
	margin: 0 auto 2rem;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 2.4rem;
	line-height: 1.125;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}
.menus-grid__item {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	margin-bottom: 2rem;
}
.menus-grid__item img {
	vertical-align: top;
}
.menus-grid__title {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280px;
	padding: 1rem 0;
	background-color: rgba(255,255,255,0.75);
	box-shadow: 0 0 0 0 rgba(255,255,255,0.75);
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.625rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	transform: translate(-50%, -50%);
	transition-duration: 0.4s;
}
.menus-grid__details {
	position: absolute;
	top: 45%; /*changed from 50% to 45% for better button spacing*/
	right: 1.25rem;
	left: 1.25rem;
	opacity: 1; /*changed from 0 to 1 to enable button to appear by default*/
	/*transform: translateY(-50%); removing for menu page */
	transition-duration: 0.25s;
	transition-property: opacity;
}
.menus-grid__details h3 {
	margin-bottom: 1rem;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.625rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	opacity: 0;
	transition-duration: 0.25s;
	transition-property: opacity;
}
.menus-grid__details img {
	margin-bottom: 1.25rem;
}
.menus-grid__button {
	margin-top: 1.5rem;
}
.menus-grid__item:hover .menus-grid__title {
	box-shadow: 0 0 0 20rem rgba(255,255,255,0.75);
	color: transparent;
}
.menus-grid__item:hover .menus-grid__details h3 {
	opacity: 1;
}
.menus-grid__circles {
	position: absolute;
	z-index: 1;
	top: 8rem;
	left: 50%;
	width: 626px;
	height: 626px;
	margin-left: 8rem;
	background: url(../img/menus-gallery/circles.png);
	pointer-events: none;
}
.menus-grid__circles_b {
	top: auto;
	right: 50%;
	bottom: -25rem;
	left: auto;
	margin: 0 12.5rem 0 0;
}
.menus-grid__circles_c {
	top: -100px;
}

.button, .field-wrap input[type="button"] {
    display: inline-block;
    padding: 0.5rem 2.5rem;
    border: 1px solid #789904;
    background-color: #789904;
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    color: #fff;
    transition-duration: 0.25s;
    cursor: pointer;
}
a {
    text-decoration: none;
}
@media screen and (max-width: 1023px) { /* tablet */
	.menus-grid__item img {
		max-width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 599px) { /* mobile */
	.menus-grid__details {
		display: none;
	}
	.menus-grid__item:hover .menus-grid__title {
		box-shadow: none;
		color: inherit;
	}
}

<div class="menus-grid">
    <div data-wow-duration="5s" class="menus-grid__circles wow rotateIn"> </div>
    <div class="grid">
        <h2 class="menus-grid__head">Menus</h2>
        <div class="grid-row">
            <div class="grid-col">
                <div class="menus-grid__item">
                    <img src="https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/1_Brunch_500x660px-374x358.jpg" alt="" />
                    <h3 class="menus-grid__title">Brunch</h3>
                    <div class="menus-grid__details">
                        <h3>Brunch</h3>
                        <a class="menus-grid__button button" href="http://www.google.com" target="_blank">View Menu</a>
                    </div>
                </div>
            </div>
            <div class="grid-col">
                <div class="menus-grid__item">
                    <img src="https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/2_Lunch_500x660px-374x358.jpg" alt="" />
                    <h3 class="menus-grid__title">Lunch</h3>
                    <div class="menus-grid__details">
                        <h3>Lunch</h3>
                        <a class="menus-grid__button button" href="http://www.google.com" target="">View Menu</a>
                    </div>
                </div>
            </div>
            <div class="grid-col">
                <div class="menus-grid__item">
                    <img src="https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/3_Dinner_500x660px-501x358.jpg" alt="" />
                    <h3 class="menus-grid__title">Dinner</h3>
                    <div class="menus-grid__details">
                        <h3>Dinner</h3>
                        <a class="menus-grid__button button" href="http://www.google.com" target="">View Menu</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您的第三个图像的宽度为501px，其他图像的分辨率为374px：

1_Brunch_500x660px-374x358.jpg
  2_Lunch_500x660px-374x358.jpg
  3_Dinner_500x660px-501x358.jpg

将第三个文件名更改为

https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/3_Dinner_500x660px-374x358.jpg

能解决问题。

第三个图像（具有与第一个2相同的类/属性）的大小不同

1 个答案: