标签：play   默认   href   dev   display   flow   ali   item   foreach   

一：flex大法

步骤

1. 设置外部容器 display: flex;
2. 设置内部容器 align-items: stretch;

原理

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

示例

<style>
    /*1. 设置外部容器 display: flex;*/
    .container{
        display: flex;
    }
    .container > div:nth-child(1){
        background: pink;
    }
    .container > div:nth-child(2){
        background: yellow;
    }
    .container > div:nth-child(3){
        background: red;
    }
    /*2. 设置内部容器 align-items: stretch;*/
    .box{
        align-items: stretch;
        width: 100px;
        margin-left: 20px;
    }
</style>
<div class="container">
    <div class="box">
        <img src="https://via.placeholder.com/120x200" width="100px" >
        <p>img1 120*200</p>
    </div>  
    <div class="box">
        <img src="https://via.placeholder.com/120x300" width="100px" >
        <p>img2 120*300</p>
    </div>
    <div class="box">
        <img src="https://via.placeholder.com/120x150" width="100px" >
        <p>img3 120*150</p>
    </div> 
</div>
<script>
    // 点击拓展高度的区域也可触发事件
    document.querySelectorAll(‘.box‘).forEach((d) => {
        d.onclick = function(e){
            alert(e.target.innerText);
        }   
    })
</script>

二：padding补偿法

网上搜了一下发现这种方法居然有这种这个高大上的名词。。

步骤

1. 设置外部容器超出隐藏：overflow: hidden;
2. 设置内部容器一个很大的padding-bottom和负margin-bottom：margin-bottom:-10000px; padding-bottom:10000px;

原理

https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom
CSS的 margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。

我的理解是用padding-bottom把外部容器撑开（外部容器设置了overflow: hidden;已经创建BFC），然后负的margin-bottom并不会将元素实际高度改变，只会改变这个容器计算时的高度，这样外部容器的高度计算时就为最高内部容器高度了。

示例

<style>
    /*1. 设置外部容器overflow: hidden;*/
    .container{
        overflow: hidden;
    }
    .container > div:nth-child(1){
        background: pink;
    }
    .container > div:nth-child(2){
        background: yellow;
    }
    .container > div:nth-child(3){
        background: red;
    }
    /*2. 设置内部容器
        margin-bottom:-10000px;
        padding-bottom:10000px;
    */
    .box{
        margin-bottom:-10000px;
        padding-bottom:10000px;
        width: 100px;
        float: left;
        margin-left: 20px;
    }
</style>
<div class="container">
    <div class="box">
        <img src="https://via.placeholder.com/120x200" width="100px" >
        <p>img1 120*200</p>
    </div>  
    <div class="box">
        <img src="https://via.placeholder.com/120x300" width="100px" >
        <p>img2 120*300</p>
    </div>
    <div class="box">
        <img src="https://via.placeholder.com/120x150" width="100px" >
        <p>img3 120*150</p>
    </div> 
</div>
<script>
    // 点击补偿的的区域也可触发事件
    document.querySelectorAll(‘.box‘).forEach((d) => {
        d.onclick = function(e){
            alert(e.target.innerText);
        }   
    })
</script>

三：table布局

相当于用<table>

步骤

1. 设置外部容器 display: table;
2. 设置内部容器 display: table-cell;

原理

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

示例

<style>
    /*1. 设置外部容器 display: table;*/
    .container{
        display: table;
    }
    .container > div:nth-child(1){
        background: pink;
    }
    .container > div:nth-child(2){
        background: yellow;
    }
    .container > div:nth-child(3){
        background: red;
    }
    /*2. 设置内部容器 display: table-cell;*/
    .box{
        display: table-cell;
        /*vertical-align: top; 默认是bottom*/
        width: 100px;
        /*margin-left: 20px; table布局下会失效*/
    }
</style>
<div class="container">
    <div class="box">
        <img src="https://via.placeholder.com/120x200" width="100px" >
        <p>img1 120*200</p>
    </div>  
    <div class="box">
        <img src="https://via.placeholder.com/120x300" width="100px" >
        <p>img2 120*300</p>
    </div>
    <div class="box">
        <img src="https://via.placeholder.com/120x150" width="100px" >
        <p>img3 120*150</p>
    </div> 
</div>
<script>
    // 点击拓展高度的区域也可触发事件
    document.querySelectorAll(‘.box‘).forEach((d) => {
        d.onclick = function(e){
            alert(e.target.innerText);
        }   
    })
</script>

CSS-同一行的元素高度统一

标签：play   默认   href   dev   display   flow   ali   item   foreach   

原文地址：https://www.cnblogs.com/jffun-blog/p/9520290.html