时间戳

首页 > 解决方案 > CSS Flexbox - 为什么我的图像重叠？

html - CSS Flexbox - 为什么我的图像重叠？

问题描述

这里是 flexbox 的新手。我正在创建一个媒体查询，以便当窗口折叠或在移动设备上时，flexbox 项目折叠成单个列而不是并排。

我已经用其他元素成功地实现了这一点，但由于某种原因，下面的图像是重叠的，而不是折叠成一列。我没有设置position: absolute;

注意：我是在 Salesforce 上开发的，所以图片 src 是 Salesforce 特有的功能

HTML：

<div class="container-2">
    <div class="post1">
        <img src="{!URLFOR($Resource.post1)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample post</p>
    </div>
    <div class="post2">
        <img src="{!URLFOR($Resource.post2)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample Post</p>
    </div>
</div>

CSS

.container-2 {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-top: 10px;
    justify-content: center;
    flex-direction: column;
}
        
.post1, .post2 {
    flex: 1;    
}

标签： htmlcssflexbox

解决方案

首先进行一点代码清理

HTML

<div class="container-2">
    <div class="post1">
        <img src="{!URLFOR($Resource.post1)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample post</p>
    </div>
    <div class="post2">
        <img src="{!URLFOR($Resource.post2)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample Post</p>
    </div>
</div>

CSS

.container-2{
  display: flex;
    flex-flow: wrap;
    margin-top: 10px;
    justify-content: center;
}

.post1, .post2 {
    flex:1;
}

我认为这就是你所需要的，你不希望它有方向：column; 您希望它并排放置，除了在空间不足时包装成一列，对吗？

https://codepen.io/philwelsh/pen/JjRzJBV

这对你想要的是否正确

推荐阅读