多列布局：定宽+自适应，不定宽+自适应，等宽布局，等高布局

英子的搬砖日志

已于 2022-11-29 11:52:38 修改

阅读量3.8k

点赞数 1

分类专栏： CSS 文章标签：多列布局 css布局布局方案布局代码

于 2017-08-09 10:29:20 首次发布

本文链接：https://blog.csdn.net/ganyingxie123456/article/details/76943961

版权

CSS 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

多列布局：定宽+自适应，不定宽+自适应，等宽布局，等高布局

1、两列布局

（1） 1列定宽+1列自适应

示例：

这里写图片描述

html代码：

	<div class="parent">
        <div class="left">
            <p>left定宽</p>
        </div>
        <div class="right">
            <p>right1自适应</p>
            <p>right2</p>
        </div>
    </div>

css样式：

		/* 方法一:  float + margin )  */
        .left{
            float:left;
            width:300px;
            background-color: #5f5;
        }
        .right{
            margin-left:310px;
            background-color: #c5c;
        }
        

        /* 方法二 : float + overflow */
        .left{
            float: left;
            width:300px;
            margin-right:10px;
            background-color: #5f5;
        }
        .right{
            overflow: hidden;
            background-color: #c5c;
        }  


        /* 方法三: table */
        .parent{
            display: table;
            width:100%;
            table-layout: fixed;
        }
        .left{
             display: table-cell;
             width: 300px;
             padding-right: 20px;
             background: #5f5;
        }
        .right{
            display: table-cell;
            background: #c5c;
        }


        /* 方法四: flex */
        .parent{
            display: flex;
        }
        .left{
            width: 300px;
            margin-right: 10px;
            background: #5f5;
        }
        .right{
            flex: 1;
             background: #c5c;
        }

		 
		 /* 方法五：float + margin + position */

		html代码：

		<div class="parent">
        	<div class="left">
            	<p>left定宽</p>
        	</div>
        	<div class="right-fix">
            	<div class="right">
                	<p>right1自适应</p>
                	<p>right2</p> 
            	</div>
        	</div>
    	</div>


		css代码：

        .left{
            float:left;
            width:100px;
            position: relative;
            background-color: #5f5;
        }
        .right-fix{
            float: right;
            width:100%;
            margin-left:-100px;
        }
        .right{
            margin: -20px 0 0 110px;
            background-color: #c5c;
        }

（2） 1列不定宽+1列自适应

示例:

这里写图片描述

html代码：

	<div class="parent">
        <div class="left">
            <p>left</p>
            <p>left不定宽</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>自适应</p>
        </div>
    </div>

css样式：

		 /* 方法一：float + overflow */
        .left{
            float: left;
            margin-right:10px;
            background-color: #5f5;
        }
        .right{
            overflow: hidden;
            background-color: #c5c;
        }


        /* 方法二： table */
        .parent{
            display: table;
            width: 100%;
        }
        .left{
            width: 0.1%;
            display: table-cell;
            background-color: #5f5;
        }
        .left p{
            width:100px;
        }
        .right{
            display: table-cell;
            background-color: #c5c;
        }


        /* 方法三: flex */
        .parent{
            display: flex;
        }
        .left{
            margin-right: 10px;
            background-color: #5f5;
        }
        .right{
            flex:1;
            background-color: #c5c;
        }

2、多列布局

（1）多列定宽+1列自适应

示例：

这里写图片描述

html代码：

	.left,.center{
        float: left;
        width: 200px;
        margin-right: 10px;
        background-color: #5f5;
    }
    .right{
        overflow: hidden;
        background-color: #c5c;
    }

css样式：

	.left,.center{
        float: left;
        width: 200px;
        margin-right: 10px;
        background-color: #5f5;
    }
    .right{
        overflow: hidden;
        background-color: #c5c;
    }

（2）多列不定宽+1列自适应

示例：

这里写图片描述

html代码：

	<div class="parent">
        <div class="left">
            <p>left</p>
            <p>定宽</p>
        </div>
        <div class="center">
            <p>center</p>
            <p>定宽</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>自适应</p>
        </div>
    </div>

css样式：

	.left,.center{
        float: left;
        margin-right: 10px;
        background-color: #5f5;
    }
    .right{
        overflow: hidden;
        background-color: #c5c;
    }

3、等分布局

示例：

这里写图片描述

html代码：

	<div class="parent">
        <div class="one">
            <p>one</p>
        </div>
        <div class="two">
            <p>two</p>
        </div>
        <div class="three">
            <p>three</p>
        </div>
        <div class="four">
            <p>four</p>
        </div>
    </div>

css样式：

		/* 方法一 : float */
        .parent{
            margin-right:10px;
        }
        .one,.two,.three,.four{
            float: left;
            width: 24%;
            box-sizing: border-box;
            margin-left: 10px;
            background: #c5c;
        } 


         /* 方法二: flex */
        .parent{
            display: flex;
        }
        .one,.two,.three,.four{
           flex: 1;
           margin-left: 10px;
           background: #c5c;
        }


        /* 方法三 : table */
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .one,.two,.three,.four{
           display: table-cell;
           border: 1px solid #c5c;
        }

4、等高布局

示例：

这里写图片描述

html代码：

	<div class="parent">
        <div class="left">
            <p>left</p>
            <p>等高布局</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>等高布局</p>
        </div>
    </div>

css样式：

		/* 方法一: float */
        .parent{
            overflow: hidden;
        }
        .left,.right{
            padding-bottom:9999px;
            margin-bottom:-9999px;
        }
        .left{
            float: left;
            width: 200px;
            margin-right: 10px;
            background-color: #5f5;
        }
        .right{
            overflow: hidden;
            background-color: #c5c;
        } 

        /* 方法二: flex */
        .parent{
            display: flex;
        }
        .left{
            width: 200px;
            margin-right: 10px;
            background-color: #5f5;
        }
        .right{
            flex: 1;
            background-color: #c5c;
        }


        /*方法三: table*/
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .left,.right{
            display: table-cell;
        }
        .left{
            width: 200px;
            padding-right: 10px;
            background-color: #5f5;
        }
        .right{
            background-color: #c5c;
        }

方法一的实现原理：
垂直方向margin无法改变元素的内部尺寸，但却能改变外部尺寸，设置了margin-bottom:-9999px意味着元素的外部尺寸在垂直方向上小了9999px。默认情况下，垂直方向块级元素上下距离是0，一旦margin-bottom:-9999px就意味着后面所有元素和上面元素的空间距离变成了-9999px，也就是后面元素都往上移动了9999px。此时，通过padding-bottom:9999px增加元素高度，这正负一抵消，对布局层并无影响，但却带来了我们需要的东西—视觉层多了9999px高度的可使用的背景色。但是，9999px太大了，所以需要配合父级overflow:hidden把多出来的色块背景隐藏掉，于是实现了视觉上的等高布局效果。—— 《CSS世界》