CSS实现多个同样式div容器单列多行排列的布局方案

问题定位 #

原有代码无法实现单列多行排布，核心问题有两个：

• .dot类设置了position: absolute和固定的top/left偏移、位移变换，所有带该类的元素会脱离普通文档流，全部重叠在同一坐标位置，无法按顺序排列
• 父容器.right仅配置了flex方向、换行属性，未声明display: flex，flex布局规则完全不生效，同时设置的float属性会和flex布局产生冲突，导致布局错乱

具体修改步骤 #

• 保留.dot类所有和卡片视觉效果相关的样式（阴影、圆角、内部flex布局、固定宽度、hover动效等），删除绝对定位、固定偏移、位移变换属性，新增下外边距拉开卡片之间的垂直距离
• 调整父容器.right样式：删除冲突的float属性，声明为flex容器，设置纵向排列规则，可根据需要配置对齐方式控制整列卡片的水平位置
• 在父容器内放入6个.dot结构，所有卡片完全复用原有样式即可

完整修改代码 #

CSS部分 #

.dot:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.dot{
    padding: 20px;
    box-sizing: border-box;
    background: #D3D3D3;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    display: flex;
    width: 600px;
    transition: .5s;
    margin-bottom: 20px;
}
.dot .imgBx{
    width: 150px;
    flex: 0 0 150px;
}
.dot .imgBx img{
    max-width: 100%;
}
.dot .content{
    padding-left: 20px;
}
.dot .content p{
    text-align: justify;
}

.right{
    display: flex;
    flex-direction: column;
    /* 如需整列靠右对齐保留该行，居中改为center，靠左改为flex-start */
    align-items: flex-end;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

HTML部分 #

<div class="right">
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>Bangladesh's apparel exporters concerned as NBR firm on bond licencing</p>
        </div>
    </div>
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>第二条资讯内容</p>
        </div>
    </div>
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>第三条资讯内容</p>
        </div>
    </div>
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>第四条资讯内容</p>
        </div>
    </div>
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>第五条资讯内容</p>
        </div>
    </div>
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>第六条资讯内容</p>
        </div>
    </div>
</div>

调整卡片间距可修改.dot的margin-bottom数值，调整整列卡片水平位置修改.right的align-items属性值即可，不需要给单个卡片添加定位。

内容的提问来源于stack exchange，提问作者Hania Hafeez Khan