CSS两列布局的N种实现

web前端开发

共 4587字,需浏览 10分钟

 ·

2020-11-28 03:18

来源 | http://www.fly63.com/article/detial/9541

一,什么是两列布局

两列布局分为两个,一种是垂直定宽,右侧自适应,另一种是两列都自适应(即纵向宽度由子元素决定,右侧补齐剩余空间)。
在css面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能,下面将分别介绍实现方式。

二,顶端定宽,右侧自适应如何实现?

1、双列直插式

原理:两个元素都设置dislpay:inline-block,为了消除HTML空间的影响,父元素的字体大小需要设置为0,正确匹配元素的宽度使用计算函数计算。如果两个元素的高度不一样,可以给元素设置vertical-align:top调整。
缺点:由于父元素设置了font-size为0,子元素内文字不会显示。
<html> <head> <meta charset="utf-8"> <title>title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; font-size:0; } .left{ display: inline-block; width: 100px; height: 200px; background-color: red; vertical-align: top;
} .right{ display: inline-block; width: calc(100% - 100px); height: 400px; background-color: blue; vertical-align: top; }style> head> <body> <div> <div> <span>1234span> div> <div> <span>1234span> div> div> body>html>

2、双浮动

原理:两个元素设置浮动,右侧自适应元素宽度使用calc函数计算
缺点:父元素需要清除浮动
<html> <head> <meta charset="utf-8"> <title>title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%;
} .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ float: left; width: calc(100% - 100px); height: 400px; background-color: blue; }style> head> <body> <div> <div> <span> 123adadadddddddddddddddddddddddddddddddddddddddd span> div> <div>div> div> body>html>

3、浮动+保证金

原理:预设定宽元素浮动,右侧自适应元素设置margin-left的值大于定宽元素的宽度即可
缺点:父元素需要清除浮动。
<html> <head> <meta charset="utf-8"> <title>title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%;
} .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ margin-left: 100px; height: 400px; background-color: blue; }style> head> <body> <div> <div> <p>1234p> div> <div> <p>1234p> div> div> body>html>

4、浮动+ BFC

原理:父元素设置溢出:隐藏,左侧定宽元素浮动,右侧自适应元素设置溢出:自动创建BFC
缺点:前端元素的内容如果超过设定宽度会重叠到右侧元素上。
<html> <head> <meta charset="utf-8"> <title>title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; overflow: hidden; } .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ overflow: auto; height: 400px; background-color: blue; }style> head> <body> <div> <div>111111111111111111111111div> <div>111111111111111111111111111111111111111111111div> div> <div>div> body>html>

5、绝对+左边距

原理:父元素相对定位,垂直元素绝对定位,右侧自适应元素设置margin-left的值大于定宽元素的宽度
缺点:父元素设置了相对定位
<html> <head> <meta charset="utf-8"> <title>title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; position: relative; } .left{ position: absolute; width: 100px; height: 200px; background-color: red; } .right{ margin-left: 100px; height: 400px; background-color: blue; }style> head> <body> <div> <div>div> <div>div> div> body>html>

6、flex布局

原理:父元素设置display:flex,自适应元素设置flex:1
缺点:存在兼容性问题,IE10以下不支持
<html> <head> <meta charset="utf-8"> <title>title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; display: flex; } .left{ width: 100px; height: 200px; background-color: red; } .right{ flex: 1; height: 400px; background-color: blue; }style> head> <body> <div> <div>div> <div>div> div> body>html>

三,左右两端元素都自适应

严格来说,并不算两个元素都是适应,只是将上面的定宽替换由子元素撑开而已

1、浮动+ BFC

原理和上面一样,只是稍微元素的宽度没有设置,由子元素撑开

2、table布局

原理:父元素显示:表格,垂直元素外围用一个div包装,该div设置显示:表格单元格,宽度:0.1%(保证最小宽度),右侧元素内部设置margin-right,右侧元素设置显示:table-cell。
缺点:IE7及以下不支持,当display:tabletime,padding失效,父元素的line-height属性失效,当display:table-cell时,margin无效。
<html> <head> <meta charset="utf-8"> <title>title> <style> .parent{ display: table; width: 100%;
} .box{ display: table-cell; width: 0.1%; } .left{ margin-right: 20px; background-color: red; height: 200px; } .right{ display: table-cell; background-color: blue; height: 300px; }style> head> <body> <div> <div> <div>126545453dddddddd453453453div> div> <div>12121div> div> body>html>

3、flex布局

原理,缺点同上面的flex布局

4、网格布局

原理:父元素设置显示:grid,grid-template-columns:auto 1fr;(这个属性定义列宽,auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位,表示剩余空间做等分) grid-gap:20px(行间距)
缺点:兼容性太差,IE11都不支持,谷歌57以上才可以。
<html> <head> <meta charset="utf-8"> <title>title> <style> .parent{ display:grid; grid-template-columns:auto 1fr; grid-gap:20px } .left{ background-color: red; height: 200px; } .right{ height:300px; background-color: blue; }style> head> <body> <div> <div>1111111111111111111111111div> <div>div> div> body>html>
 
本文完~
浏览 25
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报