国产野马 2022-07-25 11:41 采纳率: 100%
浏览 138
已结题

html使用flex布局,实现两列 每行根据图片高度自适应,并且均匀排序,代码不生效或是错误

html使用flex布局,实现两列 每行根据图片高度自适应,并且均匀排序,代码不生效或是错误

想实现效果图如下:

img

问题相关代码,请勿粘贴截图
<style>
    .list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .list_item{
        width:50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }
</style>
<body>
    <div class="list">

        <div class="list_item">
            <image mode="widthFix" src = "https://img2.baidu.com/it/u=3635204433,939208923&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"></image>
            <div>
                123

            </div>
            <div>
                456

            </div>
        </div>

        <div class="list_item">
            <image mode="widthFix" src = "https://f.jwx.dx.houpukeji.com/uploads/9a007a76-3769-4e89-b350-81fa096ac828/20200727/9a16894173be4c77a48cab6c1c6ab637.png"></image>
            <div>
                123

            </div>
            <div>
                456

            </div>
        </div>

        <div class="list_item">
            <image mode="widthFix" src = "https://f.jwx.dx.houpukeji.com/uploads/9a007a76-3769-4e89-b350-81fa096ac828/20200727/9a16894173be4c77a48cab6c1c6ab637.png"></image>
            <div>
                123

            </div>
            <div>
                456

            </div>
        </div>

        <div class="list_item">
            <image mode="widthFix" src = "https://img2.baidu.com/it/u=3635204433,939208923&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"></image>
            <div>
                123

            </div>
            <div>
                456

            </div>
        </div>
        
    </div>
</body>
运行结果及报错内容

实际代码运行结果如下:

img

我的解答思路和尝试过的方法

多次尝试解决无果

我想要达到的结果

img

  • 写回答

3条回答 默认 最新

  • 前端不释卷leo 前端领域新星创作者 2022-07-25 12:10
    关注

    直接使用瀑布流布局。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月2日
  • 已采纳回答 7月25日
  • 创建了问题 7月25日

悬赏问题

  • ¥15 u盘问题:盘符不显示 无媒体
  • ¥50 R语言读取nc按月均值转为tif
  • ¥30 智能车串级pid调参
  • ¥15 visual studio code翻译老是错误
  • ¥20 卫星测高数据的高程转换
  • ¥15 爬取招聘网站数据信息
  • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
  • ¥15 ultralytics库导出onnx模型,模型失去预测能力
  • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题
  • ¥15 SQL数据自动生成问题