时间戳

首页 > 解决方案 > 如何在一行中放置不同尺寸的弹性物品？

html - 如何在一行中放置不同尺寸的弹性物品？

问题描述

所以我有一个弹性容器，里面有 6 个弹性项目和图像。我需要如下图所示显示它们： 在此处输入图像描述

所以我想在两行中有不同大小的弹性项目，并让图像填充一个 div。但我的布局是这样的： 在此处输入图像描述

HTML：

<div class="pic_container">
        <div class="pic_block">
            <img src="img/pic_1.jpg" id="block1">
        </div>
        <div class="pic_block">
            <img src="img/pic_2.jpg" id="block2">
        </div>
        <div class="pic_block" id="block3">
            <img src="img/pic_3.jpg">
        </div>
        <div class="pic_block" id="block4">
            <img src="img/pic_4.jpg">
        </div>
        <div class="pic_block" id="block5">
            <img src="img/pic_5.jpg">
        </div>
        <div class="pic_block" id="block6">
            <img src="img/pic_6.jpg">
        </div>
    </div>

CSS：

.pic_container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width:100%;
    height:1100px;
    background-color: black;
}

.pic_block{
    flex: 1 1 auto;
    border: 1px solid white;
}

#block1, #block2, #block5, #block6{
    width:30%;
}

#block3, #block4{
    width:39%;
}


.pic_block img{
    object-fit: contain;
    width:500px;
}

所以我尝试像示例中那样做，将 div 宽度设置为 30% 和 39%，因此两个 30% 的 div 和一个 39% 的 div 将填满整个屏幕，但是第三个 div 只是转到下一行。

标签： htmlcss

解决方案

首先，您要为图像容器提供宽度（30%和39%），只是为了将其覆盖width: 500px;到您的 img 标签本身，将其更改为100%.

其次，你的block1和block2标签被放在img标签上，而不是div这样整个事情就被打破了。这就是为什么你的前 2 张图片看起来如此不同的原因。

最后，flex: 1 1 auto;从你的.pic_block班级中删除。

推荐阅读