如何解决Divs向左浮动时未正确对齐
我正在创建一个网站,该网站将使用网格布局显示该网站上的热门视频,我希望它们以3行显示。像这样-该图像是在Photoshop中制作的:
但是当我将这些代码编码到我的网页时,我得到了这个结果-网页被缩小了,所以我可以显示错误,但是当缩放比例为0%时,仍然会发生这种布局错误:
<div class="podcastCard">
<div class="podcastHolder">
<div class="podcastImgContainer">
<img src="{{ asset('img/podcastImgs/eboys-1.jpg') }}" alt="podcastImg1" class="podcastImg">
</div>
<div class="podcastInfo">
<div class="podcastlogoContainer">
<img src="{{ asset('img/podcastImgs/logo/eBOYS-logo.jpg') }}" class="podcastlogo">
</div>
<div class="podcastNameContainer">
<h4>Episode #2</h4>
<p>eBOYS podcast</p>
</div>
<div class="clearFix"></div>
</div>
<div class="podcastInteractions">
<div class="interactionInfo">
<span class="far fa-eye"></span> <span>643K</span>
</div>
</div>
</div>
</div>
这是每个的CSS:
/* podcastVideos is the container that holds all the 'podcastCards' */
.podcastVideos {
margin-inline-start: 100px;
margin-inline-end: 100px;
}
.podcastCard {
width: 33.333%;
float: left;
margin-block-end: 60px;
}
.podcastHolder {
width: 80%;
margin: auto;
border: 1px lightgrey solid;
border-radius: 10px;
}
.podcastImgContainer {
width: 100%;
}
.podcastImg {
width: 95%;
margin-inline-start: 2.5%;
margin-block-start: 2.5%;
border-radius: 5px;
}
.podcastInfo {
margin-block-start: 10px;
margin-block-end: 10px;
width: 100%;
height: 57px;
display: flex;
align-items: center;
}
.podcastlogoContainer {
width: 15%;
float: left;
height: 57px;
display: flex;
align-items: center;
}
.podcastlogo {
width: 100%;
border-radius: 50%;
margin-inline-start: 7px;
}
.podcastNameContainer {
width: 85%;
float: left;
margin-inline-start: 20px;
}
.podcastNameContainer h4 {
height: 22px;
overflow-x: scroll;
}
.podcastInteractions {
border-top: 1px lightgrey solid;
text-align: right;
}
.interactionInfo {
margin-block-start: 5px;
margin-block-end: 5px;
margin-inline-end: 10px;
color: grey;
}
解决方法
将width
中的podcastCard
从33.333%降低到33%。然后,整个宽度变为99%,留出1%的空间。当我遇到类似的麻烦时,为我工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。