我正在使用CSS网格构建容器div的网格。
我的主要CSS是针对移动视图,然后我使用媒体查询进行桌面视图,然后使用第二个媒体查询进行更广泛的屏幕。
实际上,我从grid-template-columns:1fr(Mobile)切换到grid-template-columns:1fr(桌面)到grid-template-columns:1 fr 1fr(宽屏)。
到现在为止还挺好。但是,当我在两个桌面视图之间调整大小时,我的div会改变高度(尽管高度:自动)。
我将粘贴相关的CSS:
.container {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-row-gap: 3vmin;
}
.special {
width: 90%;
height: auto;
border: 1px #000 solid;
box-shadow:0 0.1rem 0.5rem rgba(0,0,0,0.2);
justify-self: center;
border-radius: .5rem;
padding-bottom: 5%;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
@media only screen and (min-width: 415px) {
/*.container {
grid-template-columns: 1fr;
}*/
.special {
width: 550px;
padding-bottom: 0;
}
}
@media only screen and (min-width: 1200px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
.container用于保存CSS网格,而.special是“卡”。里面的一切.special也使用高度:自动。
示例图片:
我现在已经摸不着头几天了。有人可以为我揭开光明吗?
Codepen供参考:https://codepen.io/stetsonthree/pen/YYQgze
.container {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-row-gap: 3vmin;
}
.special {
width: 90%;
height: auto;
border: 1px #000 solid;
box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
justify-self: center;
border-radius: .5rem;
padding-bottom: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.special:hover {
box-shadow: 0 0.25rem 0.75rem rgba(0, 255, 0, 0.2);
}
.spc-banner {
text-align: center;
background-color: #B5B5B5;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
letter-spacing: 0.1em;
}
.spc-promo {
text-align: center;
background-color: #B5B5B5;
border-radius: 0 0 .5rem .5rem;
width: 50%;
margin: auto;
margin-bottom: 2%;
}
.inner-container {
display: grid;
grid-template-columns: 100%;
text-align: center;
justify-items: center;
}
.spc-image img {
width: 250px;
max-width: 100%;
height: auto;
}
.spc-deals {
height: auto;
width: 100%;
}
.spc-contact {
margin-top: 15px;
width: 100%;
height: auto;
}
.spc-cta {
margin-top: 15px;
width: 100%;
height: auto;
}
.deals-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
grid-row-gap: 3vmin;
}
.btn-contact {
width: 90%;
background-color: #556270;
background-image: linear-gradient(to bottom, #979799, #666766);
border: 1px solid #1e3650;
border-radius: 4px;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 40px;
text-align: center;
text-decoration: none;
-webkit-text-size-adjust: none;
mso-hide: all;
}
.btn-deal {
width: 90%;
background-color: #556270;
background-image: linear-gradient(to bottom, #1f72e4, #1c62c5);
border: 1px solid #1e3650;
border-radius: 4px;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 40px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-text-size-adjust: none;
mso-hide: all;
}
.side-by-side-btns {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 90%;
align-items: flex-end;
margin: auto;
margin-top: -15px;
}
.btn-sub {
width: 45%;
background-color: #556270;
background-image: linear-gradient(to bottom, #979799, #666766);
border: 1px solid #1e3650;
border-radius: 4px;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 40px;
text-align: center;
text-decoration: none;
-webkit-text-size-adjust: none;
mso-hide: all;
}
@media only screen and (min-width: 415px) {
/*.container {
grid-template-columns: 1fr;
}*/
.special {
width: 550px;
/* max-height: 436px; */
}
.spc-banner {
letter-spacing: 0.25em;
line-height: 1.75em;
font-size: 1.25em;
}
.inner-container {
margin-top: 15px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-row-gap: 1vmin;
}
.spc-image {
height: auto;
width: 100%;
}
.spc-image img {
width: 250px;
max-width: 100%;
height: auto;
}
.spc-deals {
height: auto;
width: 100%;
}
.btn-contact {
width: 75%;
}
.btn-deal {
width: 75%;
}
.spc-disclaimer {
margin-top: -15px;
margin-bottom: 15px;
padding-left: 25px;
padding-right: 25px;
}
}
@media only screen and (min-width: 1200px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
<div class="container">
<div class="special">
<div class="spc-banner">
2017 BMW 320I XDRIVE SEDAN
</div>
<div class="spc-promo">
Available 3.34% APR
</div>
<div class="inner-container">
<div class="spc-image">
<img src="https://via.placeholder.com/250x167" alt="Special">
</div>
<div class="spc-deals">
<div class="deals-container">
<div>
<span style="font-size:.8rem;">Lease for</span>
<br>
<span style="font-size:1.75rem;font-weight:bold;">$299</span>
<span style="font-size:.9rem;">/mo</span><br><span style="font-size:.75rem;">for 27 mos w/$3995 down</span></div>
<div>
<span style="font-size:.8rem;">Zero Down Lease for</span>
<br>
<span style="font-size:1.75rem;font-weight:bold;">$299</span>
<span style="font-size:.9rem;">/mo</span><br><span style="font-size:.75rem;">for 27 mos</span></div>
<div><span style="font-size:.8rem;">Total savings</span><br><span style="font-size:1.5rem;font-weight:bold;">$5,490</span></div>
<div><span style="font-size:.8rem;">Buy for</span><br><span style="font-size:1.5rem;font-weight:bold;">$39,955</span></div>
</div>
</div>
<div class="spc-contact">
📞 Call Now<br>
<a class="btn-contact" href="tel:8005555555">(800) 555-5555</a>
</div>
<div class="spc-cta">
<br>
<a class="btn-deal" href="#">Get Deal</a><br>
<br>
<div class="side-by-side-btns">
<a class="btn-sub" href="#">View Inventory</a>
<a class="btn-sub" href="#">Value Your Trade</a>
</div>
</div>
</div>
<div class="spc-disclaimer">
*Disclaimer - Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
</div>
</div>
<div class="special">
<div class="spc-banner">
M O D E L
</div>
<div class="spc-promo">
% APR
</div>
<div class="inner-container">
<div class="spc-image">
<img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
</div>
<div class="spc-deals">
Money
</div>
<div class="spc-contact">
Call Now
</div>
<div class="spc-cta">
Apply
</div>
</div>
</div>
<div class="special">
<div class="spc-banner">
M O D E L
</div>
<div class="spc-promo">
% APR
</div>
<div class="inner-container">
<div class="spc-image">
<img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
</div>
<div class="spc-deals">
Money
</div>
<div class="spc-contact">
Call Now
</div>
<div class="spc-cta">
Apply
</div>
</div>
</div>
<div class="special">
<div class="spc-banner">
M O D E L
</div>
<div class="spc-promo">
% APR
</div>
<div class="inner-container">
<div class="spc-image">
<img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
</div>
<div class="spc-deals">
Money
</div>
<div class="spc-contact">
Call Now
</div>
<div class="spc-cta">
Apply
</div>
</div>
</div>
<div class="special">
<div class="spc-banner">
M O D E L
</div>
<div class="spc-promo">
% APR
</div>
<div class="inner-container">
<div class="spc-image">
<img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
</div>
<div class="spc-deals">
Money
</div>
<div class="spc-contact">
Call Now
</div>
<div class="spc-cta">
Apply
</div>
</div>
</div>
<div class="special">
<div class="inner-container">
<div class="spc-image">
<img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
</div>
<div class="spc-deals">
Money
</div>
<div class="spc-contact">
Call Now
</div>
<div class="spc-cta">
Apply
</div>
</div>
</div>
</div>
发生这种情况是因为您使用padding-bottom的百分比:
padding-bottom: 5%;
尽管不直观,但这个百分比与元素的width
有关,而不是height
。由于宽度会发生变化,因此5%转换为的像素数也会发生变化。
另见
Why are margin/padding percentages in CSS always calculated against width?
和规格
<percentage>
百分比是根据生成的框的包含块的宽度计算的,即使对于“填充顶部”和“填充底部”也是如此。