常见布局之三列布局

最新推荐文章于 2022-07-25 12:16:07 发布

Kratial

最新推荐文章于 2022-07-25 12:16:07 发布

阅读量770

点赞数

本文链接：https://blog.csdn.net/Kratial/article/details/82056425

版权

需求：三列布局：两边定宽，中间自适应

方式1：（利用浮动)

css样式部分：

 <style>
    *{
    	margin:0;
    	padding:0;
    }
    html,body{
    	height:100%;
    }
    div{
    	float:left;
    	height:100%;
    }
    .main{
    	background:blue;
    	width:100%;
    	box-sizing:border-box;
    	padding-left:200px;
    	padding-right:200px;
    }
    .left{
    	background:purple;
    	width:200px;
    	margin-left:-100%;/*其实就是左边框距离右边的距离为100%*/
    }
    .right{
    	background:green;
    	width:200px;
    	margin-right:-100%;
    }
</style>

html部分：

<body>
	<div class="main">中间的内容</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
  
</body>

这里需要注意一点，就是中间自适应的那一块放在最前面。
第二个需要知道的知识点是box-sizing的用法。

方式2：（利用flex布局）

html部分：
<body>
<div class="wrapper">
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
</div>
</body>

css部分：
 <style>
        html,body{
            padding:0;
            margin:0;
        }
        .wrapper{
            width:800px;
            height:300px;
            border:1px solid black;
            display:flex;
            margin:0 auto;
        }
        .left,.right,.center{
            height:300px;
        }
        .left,.right{
            flex:0 0 200px;
            width:200px;
            background:cornflowerblue;
        }
        .center{
            margin:0 10px;
            flex:1;
            background:pink;
        }

    </style>

运行结果：
在这里插入图片描述

方式3：(利用position的绝对定位)

css部分：
    <style>
        html,body{
            margin:0;
            padding:0;
        }
        .wrapper{
            position:relative;
            width:800px;
            height:400px;
            border:1px solid black;
        }
        .main{
           width:100%;
            height:400px;
            box-sizing:border-box;
            padding:0 200px;
            background:pink;
        }
        .left,.right{
            position:absolute;
            width:200px;
            height:400px;
            background:dodgerblue;
        }
        .left{
            left:0;
            top:0;
        }
        .right{
            top:0;
            right:0;
        }
    </style>

html部分：
<body>
<div class="wrapper">
    <div class="main">中间内容区</div>
    <div class="left">左边区域</div>
    <div class="right">右边区域</div>
</div>
</body>

运行结果：
在这里插入图片描述

Kratial

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常见布局之三列布局

1.三列布局：两边定宽，中间自适应 css样式部分： &amp;amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;amp;gt; *{ margin:0; padding:0; } html,body{ height:100%; } div{ float:left; height:100%; } .m
复制链接

扫一扫