gpt4 book ai didi

html - 无处不在的大高度

转载 作者:行者123 更新时间:2023-11-28 04:31:10 26 4
gpt4 key购买 nike

不知何故,图片上的一组相同 block 元素中的一个变得莫名其妙地变大了。图片上显示的样式并未暗示此元素的那种行为。事实上,height 甚至没有为那些 h3 设置。 Browser screenshot

html是

<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
<a href="#" class="about-more-link">The more you know</a>
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>

三个相同的 div.about-work-details 元素。

默认的CSS是

.about-us{
background-color: #fff;
position: relative;
}

.about-us-heading{
color: #272d32;
}

.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}

.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}

.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}

.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}

.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}

.about-work-details:last-of-type{
margin-right: 0;
}

.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}

媒体查询修改

@media screen and (max-width: 860px){

.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}

.about-us{
padding-bottom: 1px;
}

.about-work-details:last-of-type {
margin-right: auto;
}

}

最佳答案

似乎是一个 float 元素行为问题。

  • 尝试从 .about-more 中删除/注释 float:left;

关于html - 无处不在的大高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41726326/

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