Div 向左浮动时未正确对齐

Question

我正在创建一个网站，该网站将使用网格布局来显示网站上的热门视频，我希望它们以 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;
}

Answer 1

将 podcastCard 的 width 从 33.333% 降低到 33% 左右。那么整体宽度就变成了99%，给出1%space。在我遇到类似问题时为我工作。

Answer 2

来自j08691评论中的回答：

Add min-height to .podcastCard that's at least as tall as the tallest card, plus whatever margin you have. That or clear: left every fourth card

我必须添加一个最小高度，它奏效了

Div 向左浮动时未正确对齐

Divs are not aligning correctly when they are floating left

html

css

css-float