摘要:重点以需求为例说明。三左边不定宽,右边自适应布局需求左侧不定宽,右侧自适应,间距。五等宽布局解决方案需求多列等宽,并保留间距。
在页面开发中,当我们拿到设计师给出的UI图后,首先考虑的就是布局问题,而多列布局会是我们碰到最多的布局问题,个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局,三列布局,多列布局,其中布局方法中的原理都有类似之处。
目录
</>复制代码
一、定宽+自适应两列布局
二、两列定宽,一列自适应布局
三、左边不定宽,右边自适应布局
四、多列不定宽,一列自适应
五、等宽布局解决方案
六、等高布局解决方案
(文中Css代码中颜色需自行添加)
一、定宽+自适应两列布局</>复制代码
left
right
需求:实现左侧100px,右侧自适应,且间距20px
</>复制代码
方法一:左侧浮动,右侧宽度通过margin调整
</>复制代码
.left {
float: left;
width: 100px;
}
.right {
margin-left: 120px; //相差的20px是左右之间的间距
}
</>复制代码
方法二:左侧浮动,右侧BFC
</>复制代码
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</>复制代码
方法三:table单元格默认会等宽,但是table-layout: fixed能够让table元素布局优先,。
</>复制代码
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left, .right {
display: table-cell;
}
.left {
width: 100px;
padding-right: 20px;
}
</>复制代码
方法四:flex
</>复制代码
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1
}
</>复制代码
方法五:css3 calc()计算属性
</>复制代码
.left {
display: inline-block;
width: 100px;
margin-right: 20px;
}
.right {
display: inline-block;
width: calc(100% - 120px);
}
二、两列定宽,一列自适应布局
多列布局用到的属性原理基本都一样,上面的方法也同样适用于此。
</>复制代码
left
center
right
需求1:left和center定宽100px,right自适应。
需求2:left和right定宽100px,center自适应。
需求1使用的方法跟上面有相同之处,不做赘述。重点以需求2为例说明。
</>复制代码
方法一:父元素相对布局,子元素绝对布局
</>复制代码
.parent {
position: relative;
}
.left{
position: absolute;
left: 0px;
top: 0px;
width: 100px;
}
.right {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
.center {
margin: 0 120px;
}
</>复制代码
方法二:flex布局
</>复制代码
.parent {
display: flex;
}
.left, .right {
width: 100px;
}
.left {
margin-right: 20px;
}
.right {
margin-left: 20px;
}
.center {
flex: 1;
}
</>复制代码
方法三:双飞翼布局
双飞翼布局需要将center块提前,并且需要在center的内嵌包裹块,方便设置间距,注意在设置center宽度为100%的时候,要将center的盒模型转换为IE盒模型,这样它的宽度就包含了padding。
</>复制代码
center
left
right
</>复制代码
.center, .left, .right {
float: left;
}
.left {
width: 100px;
margin-left: -100%;
}
.right {
width: 100px;
margin-left: -100px;
}
.center {
box-sizing: border-box;
width: 100%;
padding-left: 120px;
padding-right: 120px;
}
.content {
height: 100%;
}
三、左边不定宽,右边自适应布局
</>复制代码
left
right
需求:左侧不定宽,右侧自适应,间距20px。
</>复制代码
方法一:float + overflow
</>复制代码
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</>复制代码
方法二:table布局
由内容决定宽度,不由布局决定宽度,取消table-layout:fixed的作用
</>复制代码
.parent {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
}
.left {
width: 0.1% //取最小宽度,实际宽度由内容决定
padding-right: 20px;
}
</>复制代码
方法三:flex
</>复制代码
.parent {
diaplay: flex;
}
.left {
margin-right: 20px;
}
.right {
flex: 1;
}
四、多列不定宽,一列自适应
同 三、左边不定宽,右边自适应布局 方法相同。
五、等宽布局解决方案</>复制代码
column1
column2
column3
column4
需求:多列等宽,并保留20px间距。
</>复制代码
方法一:margin + float
此时需要考虑多个间距的问题,缺点:需要提前知道有多少列计算好每列宽度占比+间距,具体就是让父元素多拥有20px的宽度。
</>复制代码
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</>复制代码
方法二:table
此时需要在parent元素外层再添加一层盒子parent-layout,并设置宽度使得宽度再增加20px。
</>复制代码
column1
column2
column3
column4
</>复制代码
.parent-layout {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
方法三:flex
</>复制代码
.parent {
display: flex;
}
.column {
flex: 1;
}
.column + .column {
margin-left: 20px;
}
六、等高布局解决方案
除了解决分栏的问题之外,我们同时需要解决分列后等高布局的解决方法:
</>复制代码
方法一:table
利用table单元格本身具有等高特性
</>复制代码
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left, .right {
display: table-cell;
}
.left {
widht: 100px;
border-right: 20px solid transparent;
background-clip: padding-box; //由于是border-box,需要把背景颜色去掉
}
</>复制代码
方法二:flex
</>复制代码
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1;
}
</>复制代码
方法三:float
伪等高
</>复制代码
.left, .right {
flex: left;
width: 100%;
margin-right: 20px;
}
.right {
overflow: hidden;
}
.left, .right {
padding-bottom:9999px;
margin-bottom: -9999px;
}
.parent {
overflow: hidden;
}
(文中样式代码中的背景颜色可自行添加)
</>复制代码
说明:
BFC(块级格式上下文),可以实现和浮动元素共存,且不会遮挡浮动元素,通过overflow:hidden,
作用:避免边距折叠,不被浮动元素遮盖。且BFC能够将内容元素浮动清除,避免高度塌陷。
喜欢那就点个赞吧
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114981.html
摘要:重点以需求为例说明。三左边不定宽,右边自适应布局需求左侧不定宽,右侧自适应,间距。五等宽布局解决方案需求多列等宽,并保留间距。 在页面开发中,当我们拿到设计师给出的UI图后,首先考虑的就是布局问题,而多列布局会是我们碰到最多的布局问题,个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局,三列布局,多列布局,其中布局方法中的原理都有类似之处。 目录 一、定宽+...
摘要:重点以需求为例说明。三左边不定宽,右边自适应布局需求左侧不定宽,右侧自适应,间距。五等宽布局解决方案需求多列等宽,并保留间距。 在页面开发中,当我们拿到设计师给出的UI图后,首先考虑的就是布局问题,而多列布局会是我们碰到最多的布局问题,个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局,三列布局,多列布局,其中布局方法中的原理都有类似之处。 目录 一、定宽+...
摘要:重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上),有许多地方叙述的并不是十分详细,只是大致的描述一下,给自己提供一个知识轮廓。本篇中主要描述...
摘要:前端面试重点居中问题在页面布局开发中,居中问题是我们经常碰到的问题,掌握居中问题对于解决页面布局非常重要,同时它也是常见的面试重点。已知宽高的元素父元素相对定位,子元素绝对定位。以上才支持的兼容性写法完 前端面试重点——居中问题 在页面布局开发中,居中问题是我们经常碰到的问题,掌握居中问题对于解决页面布局非常重要,同时它也是常见的面试重点。本文汇总一些常见的居中方式以及一些注意点,权当...
阅读 3851·2021-10-12 10:11
阅读 2113·2019-08-30 15:53
阅读 1703·2019-08-30 13:15
阅读 2412·2019-08-30 11:25
阅读 1938·2019-08-29 11:24
阅读 1778·2019-08-26 13:53
阅读 3757·2019-08-26 13:22
阅读 1930·2019-08-26 10:24