weixin_45747430 2020-04-18 21:42 采纳率: 0%
浏览 88

救救孩子吧。各位大神，谢谢。

各位技术大牛，我像请问一下，有没有一种方法(除了position，float)可以将任意不同大小div放在一等同于任意大小div之和的盒子当中(类似于七巧板)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            height: 300px;
            width: 700px;
            border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            align-content:  stretch;
        }
        #div1{
            width: 200px;
            height: 170px;
            background-color: aquamarine;
        }
        #div2{
            width: 200px;
            height: 110px;
            background-color: bisque;
        }
        #div3{
            width: 300px;
            height: 300px;
            background-color: cadetblue;
        }
        #div4{
            margin-top: -130px;
            width: 200px;
            height: 130px;
            background-color: coral;
        }
        #div5{
            margin-top: -190px;
            width: 200px;
            height: 190px;
            background-color: cornflowerblue;
        }

    </style>
    <title>弹性盒子</title>
</head>
<body>
<div id="box">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
</div>
</body>
</html>

以上是我的代码但是需要设置margin才可以实现

  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 22:33
    关注

    参考GPT和自己的思路：

    您好！针对您的问题，可以使用CSS Grid布局来实现将任意不同大小的div放在一个等同于任意大小div之和的盒子中，而不使用position和float。

    具体做法是，在父元素（这里是id为box的div）中设置display:grid，然后使用grid-template-columns属性来定义每列的宽度。使用grid-template-rows属性则可以定义每行的高度。

    例如，如果要将div1、div2、div4放在第一行，div3、div5放在第二行，并且第一行的总高度等于第二行的高度，可以这样写：

    #box {
    height: 300px;
    width: 700px;
    border: 1px solid red;
    display: grid;
    grid-template-columns: 250px 250px 200px;
    grid-template-rows: 150px 150px;
}
#div1{
    background-color: aquamarine;
}
#div2{
    background-color: bisque;
}
#div3{
    background-color: cadetblue;
    grid-row: 2 / 3; /*指定该div占用第二行*/
}
#div4{
    background-color: coral;
}
#div5{
    background-color: cornflowerblue;
    grid-row: 2 / 3; /*指定该div占用第二行*/
}

    其中，grid-row属性用于指定该div在哪一行显示。上述代码使用了grid-template-columns属性，将第一列和第二列的宽度都设置为250px，第三列宽度设置为200px。使用grid-template-rows属性，将第一行的高度设置为150px，第二行的高度也设置为150px。

    这样就可以实现将任意不同大小div放在一个等同于任意大小div之和的盒子中了。具体实现可以根据实际需求自行调整。希望这个解决方案对您有所帮助！

    评论

报告相同问题？

悬赏问题

  • ¥25 关于##爬虫##的问题，如何解决?:
  • ¥15 ZABBIX6.0L连接数据库报错，如何解决？(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码
  • ¥50 随机森林与房贷信用风险模型
  • ¥50 buildozer打包kivy app失败
  • ¥30 在vs2022里运行python代码
  • ¥15 不同尺寸货物如何寻找合适的包装箱型谱
  • ¥15 求解 yolo算法问题
  • ¥15 虚拟机打包apk出现错误