Divs向左浮动时未正确对齐

问题描述

我正在创建一个网站，该网站将使用网格布局显示该网站上的热门视频，我希望它们以3行显示。像这样-该图像是在Photoshop中制作的：

但是当我将这些代码编码到我的网页时，我得到了这个结果-网页被缩小了，所以我可以显示错误，但是当缩放比例为0％时，仍然会发生这种布局错误：

这是HTML代码，因此每个podcastCard：

<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％的空间。当我遇到类似的麻烦时，为我工作。