等高布局01

我不是女神ヾ 2024-04-19 11:34 0阅读 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 条评论，0人围观）

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

相关阅读

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

1.初始布局 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

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

相关等高布局（一）

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

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

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

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

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

相关等间距布局

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

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

相关 2.2 伪等高布局

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

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

相关 01 线性布局管理器

一：布局管理器分类： 1.LinearLayout : 线性布局管理器，分为水平和垂直两种，只能进行单行布局。 2.FrameLay

桃扇骨/ 2022年03月19日 02:24/ 0 赞/ 140 阅读

相关 css 多列等高等宽布局

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

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

相关【前端面试】01 页面布局

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.问题 2. 解决方法

拼搏现实的明天。/ 2021年10月25日 14:12/ 0 赞/ 297 阅读

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

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

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

相关（代码示例）css实现等高布局的三种方式

- 本篇文章给大家带来的内容是关于css实现等高布局的三种方式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 - 本文讲的等高布局是在不手动...

灰太狼/ 2021年02月01日 16:50/ 0 赞/ 602 阅读