等高布局01

我不是女神ヾ 2024-04-19 11:34 59阅读 0赞

<style>
        * {
            padding: 0;
            margin: 0;
        }
        .clearfix::after,.clearfix::before {
             content: '.';
             display: block;
             clear: both;
             line-height: 0;
    
        }
        .box {
            overflow: hidden;
    
        }
        .col1 {
            width: 30%;
            float: left;
            background-color: blueviolet;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
    
    
        }
        .col2 {
            width: 40%;
            float: left;
            background-color: red;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
     
        }
        .col3 {
            width: 30%;
            float: left;
            background-color: yellow;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
            height: 500px;
        }
        </style>
    </head>
    <body>
        <div class="box clearfix">
            
             <div class="col1">等高布局第一列</div>
             <div class="col2">等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列</div>
             <div class="col3">等高布局第三列</div>
    
    
        </div>
        
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/47e1835f6b5a4d16962032d744086696.png

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关等高布局02

<style> * { padding: 0; margin: 0; ...

迷南。/ 2024年04月19日 11:34/ 0 赞/ 41 阅读

相关等高布局01

<style> * { padding: 0; margin: 0; } ...

我不是女神ヾ/ 2024年04月19日 11:34/ 0 赞/ 60 阅读

相关如何使用CSS实现一个自适应等高布局？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用 Flexbox 布局 ⭐ 使用 Grid 布局 ⭐ 写在最后 ----------------

Myth丶恋晨/ 2023年10月15日 12:23/ 0 赞/ 2 阅读

相关手写瀑布流—345等高瀑布流布局

1.初始布局 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

古城微笑少年丶/ 2023年01月18日 09:17/ 0 赞/ 145 阅读

相关等高布局（一）

　　某公司上级考试题，当时做的时候，思想很简单，不过想了半天还是做出来了。回家以后，由于不敢心就这解出来了而奋力研究。还算研究的比较透彻，下面就是我的研究结果，分享给大家，希望

谁践踏了优雅/ 2022年11月19日 11:22/ 0 赞/ 131 阅读

相关网页上的摄影展:等高响应布局实现

[![top banner ok][]][top banner ok 1] [![前端技术][7.png]][7.png 1] 「等高响应式布局」是什么？介绍它之前，我们先

秒速五厘米/ 2022年08月27日 13:44/ 0 赞/ 102 阅读

相关等间距布局

html： <ul class="clearfix"> <li>1</li> <li>2</li>

小灰灰/ 2022年05月21日 02:47/ 0 赞/ 249 阅读

相关 2.2 伪等高布局

让并列的两块内容等高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

我就是我/ 2022年05月09日 11:40/ 0 赞/ 161 阅读

相关 css 多列等高等宽布局

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

Bertha 。/ 2021年11月17日 22:52/ 0 赞/ 382 阅读

相关圣杯布局+伪等高布局

===>>>：[圣杯布局][Link 1] 伪等高就是不设置三块都不设置高度，内部自适应 / 伪等高如果超出 100000px边界就失效了 /

亦凉/ 2021年08月28日 21:54/ 0 赞/ 393 阅读