小视频源码，等高布局实现的两种方式

本文主要是介绍小视频源码，等高布局实现的两种方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

小视频源码，等高布局实现的两种方式
第一种方式：

（1）利用padding-bottom和margin-bottom相抵消

（2）利用paddig-bottom 撑开显示更多的背景；

margin-bottom的负值抵消padding的占位；

代码的实现如下：

<style>
        .box{
            width: 600px;
            min-height: 400px;
           overflow: hidden; 
        }
        .left,.center,.right{
            float: left;
            width: 200px;
            min-height:400px;
            padding-bottom: 1000px;
            margin-bottom: -1000px;
        }
        .left{
            background-color: yellowgreen;
        }

        .center{
            background-color: pink;
        }

        .right{
            background-color: orange;
        }
</style>

<div class="box">
        <div class="left"></div>
        <div class="center">今天的天气优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热此从v优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点</div>
        <div class="right"></div>
</div>
 

此方法的优点是：

结构简单；

可以实现任意列的等高变化；

需要合理的控制margin-bottom和padding-bottom的占位；

第二种方式：

利用border默认和高度发生变化，因为利用的是border所以，只可以实现两列或者三列等高的布局；

代码如下：

<style>
        .box{
            width: 100px;
            border-left: 100px solid red;
            border-right: 100px solid orange;
            min-height: 100px;
            background-color: pink;
        }
        .left,.center,.right{
            float: left;
            width: 100px;
            min-height: 100px;
        }
        .left{
            margin-left: -100px;
        }
        .right{
            margin-right:-100px;
        }
</style>

<div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>
 

以上就是小视频源码，等高布局实现的两种方式， 更多内容欢迎关注之后的文章

这篇关于小视频源码，等高布局实现的两种方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！