1 布局前言
2 布局要点
CSS标准盒模型(或W3C盒模型)
一个web页面是由众多html元素拼凑而成的,而每一个html元素,都被解析为一个矩形盒,而CSS盒模型就是这种矩形盒的解构模型。CSS盒模型,它由内到外、被四条边界Content edge、Padding edge、Border edge和Margin edge划分为四个区域:Content area、Padding area、Border area和Margin area,在形状上,Content area(又称content-box)是实心矩形,其余是空心环形(空心部分是Content area),如下图所示:
box-sizing(css3) 顾名思义,其作用与设置CSS box的尺寸大小有关,而CSS box又可细分为:
- content-box(即content area)
- padding-box(=content area + padding area)
- border-box(=content area + padding area + border area)
- margin-box(=content area + padding area + border area + margin area)
元素的分类及其布局特性
- 块级元素:display属性取block、table、flex、grid和list-item等值的独占一行显示的元素。
- 独占一行(width默认为100%,height为0);
- 可以设置任何尺寸相关的属性(width、padding、margin和border);
- 行内元素:display属性取inline值的可在同一行内排列显示的元素。
- 在一行内可以与多个同类型的元素按从左到右的顺序排列;
- 不可置换行内元素不能设置width、height和垂直方向上的margin,而可置换行内元素则可以;
- 在水平和垂直方向上的对齐方式,行内级元素分别受父元素的text-align属性和自身vertical-align属性的控制(父元素是table-cell元素时,也受父元素的vertical-align属性控制),在水平方向上默认左对齐,在垂直方向上默认在行框的baseline基线上显示。
- 行内块级元素:display属性取inline-block、inline-table、inline-flex和inline-grid等值的兼具块级元素和行内级元素布局特性的元素。
- 排列方式与行内级元素同,不独占一行,在一行内按从左到右的顺序排列;
- 水平和垂直方向上的对齐方式与行内级元素同;
- 和块级元素一样,可以设置任何尺寸属性(但width默认为0);
- 块级元素:display属性取block、table、flex、grid和list-item等值的独占一行显示的元素。
模型结构
line box的模型结构,top线、text-top线、middle线、baseline线、text-bottom线和bottom线
3 布局分类
传统布局方案(浮动、定位)
浮动 (float) (left|right)
浮动起始位置:浮动元素(包括左右)的浮动起始位置,为最后一行最左侧的空白位置,而不管空白位置是否能够容纳当前浮动元素;
浮动结束位置:
左浮动元素遇到第一个左浮动元素或包含块的最左侧padding时,结束浮动;
右浮动元素遇到第一个右浮动元素或包含块的最右侧padding时,结束浮动;
清除浮动(clear)(left|right|both):其作用是改变“当前元素”与“前一个声明的浮动元素”之间的默认布局规则,这种改变主要体现为:让当前元素换行显示。这句话包含三个要素,分别为:
- 使用者:当前元素(浮动元素或者非浮动元素的块级元素)
- 作用对象(清除谁的浮动):前一个声明的浮动元素
- 目的(作用):让当前元素换行显示
注:当子元素进行浮动时候,会造成父元素高度塌陷,不能自动拉伸,引入clearfix
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html lang="zh_CH">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.parent {
width: 100%;
border: 1px solid #2f2f2f;
}
.child-fl {
float: left;
width: 30%;
height: 100px;
background-color: #63b5ee;
}
.child-fr {
float: right;
width: 30%;
height: 100px;
background-color: #eedb37;
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child-fl">FL</div>
<div class="child-fr">FR</div>
</div>
</body>
</html>Position 属性 (static|relative|absolute|fixed)
flex布局方案
flexbox 布局是一个完整的布局模块而不是一个单独的属性,因此它涉及很多东西,包括它的整个属性集。 其中有的属性是在容器(container,也可以叫做父元素,称为flex container)上设置的,有的则是在容器的子元素(item,也可以叫做子元素,称为flex items)设置。
注:Flexbox布局最适合应用程序的组件和小规模布局,而 Gird 布局则适用于较大规模的布局。
如果 “常规”布局基于 block(块) 和 inline(内联) 流动方向,flex 布局则是基于 “flex-flow(弹性流动)” 方向。请在规范中看一下这个图片,解释flex布局背后的主要思想。
在flex布局中,flex 项(就是子元素)要么按照
main axis
(主轴)(从main-start
到main-end
)排布,要么按照cross axis
(交叉轴) (从cross-start
到cross-end
)排布。- main axis: flex 容器的主轴,flex 项沿着主轴排布,注意主轴不一定是水平的,主轴是水平还是垂直取决于
flex-direction
属性(见下文)。 - main-start|main-end: 分别表示主轴的开始位置和结束位置,flex 项在容器中会从 main-start 到 main-end 排布。
- main size: flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”,要么是“高度”,这取决于主轴方向。
- cross axis: 垂直于主轴的轴线称为交叉轴,其方向取决于主轴方向。
- cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。
- cross size: flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”,要么是“高度”,这取决于交叉轴方向。
父元素属性(flex container)
display
用来定义一个 flex 容器。如果设置为
flex
则容器呈现为块状元素,设置为inline-flex
则容器呈现为行内元素。它为所有直接子元素提供了 flex 上下文。1
2
3.container {
display: flex; /* or inline-flex */
}flex-direction
flex-direction
属性确立了主轴,从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局,有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。1
2
3.container {
flex-direction: row | row-reverse | column | column-reverse;
}row
(默认值) :行排布。在ltr
(left to right, 从左到右)排版方式下,flex 项从左到右排列,在rtl
(right to left, 从右到左)排版方式下,flex 项从右到左排列。row-reverse
: 反向行排布,即row
的反方向,在ltr
中从右向左,在rtl
中从左到右。column
: 列排布,与row
相似,但是 flex 项从上到下排布。column-reverse
: 反向列排布,即column
反方向,与row-reverse
相似,只是 flex 项从上到下排布。
flex-wrap
默认情况下,flex 项会尽可能地尝试排在同一行上(行或列),通过设置
flex-wrap
来决定 flex 项是否允需要换行。1
2
3.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap
(默认值) : 所有的 flex 项都会在同一行上排布,也就是我们常说的单行,或不换行。wrap
: flex 项将从上到下根据实际情况排布再多行上,也就是我们常说的多行,或会换行。wrap-reverse
: flex 项将 从下到上 根据实际情况排布再多行上折行。
flex-flow (适用于父级 flex 容器)
这是
flex-direction
和flex-wrap
属性的缩写形式。同时定义 flex 容器的主轴和交叉轴。默认是row nowrap
。1
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content
justify-content
属性定义了flex 项沿主轴方向的对齐方式。
当一行中的所有 flex 项都是固定大小,或者是灵活大小但已经达到最大 main size 时,它可以帮助分配主轴上的剩余空间。当 flex 项溢出主轴的时候,它还可以用来控制flex 项的对齐方式。flex-start
(默认值) : flex 项从主轴的开始位置(main-start)开始排布。flex-end
: flex 项从主轴的结束位置(main-end)开始排布center
: flex 项沿主轴居中排布。space-between
: flex 项沿主轴均匀排布,即我们常说的沿主轴 两端对齐 ,第一个flex 项在主轴开始位置,最后一个flex 项在主轴结束位置。space-around
: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的,因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间,但是在两个 flex 项之间有两个单位的间隙,因为每个 flex 项的两侧都有一个单位的间隙。space-evenly
: 任何两个 flex 项之间的间距(以及到 flex 容器边缘的空间)相等。
1
2
3.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}align-items
align-items
定义了 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴(垂直于主轴)上的对齐方式。flex-start
: flex 项按照交叉轴的开始位置(cross-start)对齐。flex-end:
flex 项按照交叉轴的结束位置(cross-end)对齐。center
: flex 项以交叉轴为中心,居中对齐。baseline
: flex 项按照他们的文字基线对齐。stretch
(默认值) : 拉伸 flex 项以填充整个容器(这里特别要注意:如果 flex 项有尺寸属性(min-width / max-width / width / min-height / max-height / height),那么首先应用这些尺寸属性。
1
2
3.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}align-content
当交叉轴上有剩余空间时,
align-content
可以设置 flex 容器中的 行 在交叉轴上如何分配剩余空间,类似于justify-content
在主轴上对齐单个 flex 项的方式。注意:当只有一行 flex 项时,此属性不起作用。
flex-start
:多行在容器的开始位置排布flex-end
:多行在容器的结束位置排布center
:多行在容器的总结位置排布space-between
:多行均匀分布;第一行分布在容器的开始位置,最后一行分布在容器的结束位置space-around
: 多行均匀分布,并且每行的间距(包括离容器边缘的间距)相同;strech
(默认值):多行拉伸以填充满整个剩余空间
1
2
3.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}flex 项属性 (flex items)
order
默认情况下,flex 项按源(HTML结构)顺序排布。但是,
order
属性可以控制它们在 flex 容器中的显示顺序。1
2
3.item {
order: <integer>; /* 默认值是 0 */
}flex-grow
flex-grow
定义了 flex 项在有可用剩余空间时拉伸比例。它接受的值作为比例,无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。如果所有 flex 项的
flex-grow
都设置为1
,则父容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为2
,则该子项占用的剩余空间是其他子项的两倍(或者至少会尽力获得)。1
2
3.item {
flex-grow: <number>; /* default 0 */
} 比如我们得 flex 容器中有 6 个 flex 项,每个 flex 项的
flex-grow
初始值都是 1。如果我们将每个 flex 项的flex-grow
相加起来,总和为 6。因此 flex 容器的总宽度被平均分成了 6 份。每个 flex 项增长到填充容器可用空间的1/6。当我们将第 3 个 flex 项的
flex-grow
设置为 2 时,flex 容器现在被分成了 7 等份,因为所有flex-grow
属性是:1 + 1 + 2 + 1 + 1 + 1。第 3 个 flex 项占了整个容器空间的 2/7,其他的占了 1/7。flex-shrink
flex-shrink
定义了 flex 项的收缩的能力。(注:与flex-grow
拉伸正好相反,flex-shrink
决定 flex 项允许收缩多少比例。)1
2
3.item {
flex-shrink: <number>; /* default 1 */
}flex-basis
flex-basis
定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值(e.g. 20%, 5rem,等)或者关键字。关键字auto
意味着 flex 项会按照其本来的大小显示(暂时由main-size
关键字完成,直到弃用)。关键字content
意味着根据内容来确定大小——这个关键字到目前没有被很好地支持,所以测试起来比较困难,与content
的类似的关键字还有max-content
,min-content
,fit-content
。如果设置为
0
, 则 flex 项内容周围的空隙不会根据flex-grow
按比例分配,如果设置为auto
,则 flex 项周围额外的空袭会根据flex-grow
按照比例分配。1
2
3.item {
flex-basis: <length> | auto; /* default auto */
}flex
flex
是flex-grow
、flex-shrink
、flex-basis
三个属性的缩写。其中第二个和第三个参数(flex-shrink
和flex-basis
)是可选的。默认值为0 1 auto
。1
2
3.item {
flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
}align-self
align-self
属性允许某个单独的 flex 项覆盖默认的对齐方式(或由align-items
指定的对齐方式)。具体的属性值得含义可以参考
align-items
的解释。1
2
3.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}注:
float
,clear
和vertical-align
对 flex 项没有任何作用。- main axis: flex 容器的主轴,flex 项沿着主轴排布,注意主轴不一定是水平的,主轴是水平还是垂直取决于
grid布局方案
Grid 兼容性 2017年3月左右,大部分浏览器都会开始默认支持
Grid
布局网格容器属性:
display: grid | inline-grid | subgrid
grid
:定义一个块级的网格容器inline-grid
:定义一个内联的网格容器subgrid
:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子。
grid-template-columns / grid-template-rows
使用空格分隔的值列表,用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小,它们之间的空格表示网格线。
值:
–<track-size>
: 可以是长度值,百分比,或者等份网格容器中可用空间(使用fr
单位)
–<line-name>
:你可以选择的任意名称1
2
3
4.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}grid-template-areas
通过引用
grid-area
属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号(.
)代表一个空单元格。这个语法本身可视作网格的可视化结构。值:
<grid-area-name>
:由网格项的grid-area
指定的网格区域名称.
(点号) :代表一个空的网格单元none
:不定义网格区域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域,一个是空单元格,一个 sidebar 区域组成。最后一行全是 footer 区域组成。
grid-template
用于定义
grid-template-rows
,grid-template-columns
,grid-template-areas
简写属性。值:
none
:将所有三个属性设置为其初始值<grid-template-rows> / <grid-template-columns>
:将grid-template-columns
和grid-template-rows
设置为相应地特定的值,并且设置grid-template-areas
为none
1
2
3.container {
grid-template: none | <grid-template-rows> / <grid-template-columns>;
}grid-column-gap / grid-row-gap
指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。
1
2
3
4
5
6
7
8
9
10.container {
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}justify-items
沿着 inline(行)轴线对齐网格项(grid items)(相反的属性是
align-items
沿着 block(列)轴线对齐)。此值适用于容器内的所有网格项。值:
start
:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)end
:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)center
:将网格项对齐到其单元格的水平中间位置(水平居中对齐)stretch
:填满单元格的宽度(默认值)
1
2
3.container {
justify-items: start | end | center | stretch;
}align-items
沿着 block(列)轴线对齐网格项(grid items)(相反的属性是
justify-items
沿着 inline(行)轴线对齐)。此值适用于容器内的所有网格项。值:
start
:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)end
:将网格项对齐到其单元格的底部结束边缘(底部对齐)center
:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)stretch
:填满单元格的高度(默认值)
1
2
3.container {
align-items: start | end | center | stretch;
}justify-content
有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像
px
这样的非灵活单位设置大小,就可能出现这种情况。在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 inline(行)轴线对齐网格(相反的属性是align-content
,沿着 block(列)轴线对齐网格)。值:
start
:将网格对齐到 网格容器(grid container) 的左侧起始边缘(左侧对齐)end
:将网格对齐到 网格容器 的右侧结束边缘(右侧对齐)center
:将网格对齐到 网格容器 的水平中间位置(水平居中对齐)stretch
:调整 网格项(grid items) 的宽度,允许该网格填充满整个 网格容器 的宽度space-around
:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间space-between
:在每个网格项之间放置一个均匀的空间,左右两端没有空间space-evenly
:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间
1
2
3.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}align-content
有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像
px
这样的非灵活单位设置大小,就可能出现这种情况。在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 block(列)轴线对齐网格(相反的属性是justify-content
,沿着 inline(行)轴线对齐网格)。值:
start
:将网格对齐到 网格容器(grid container) 的顶部起始边缘(顶部对齐)end
:将网格对齐到 网格容器 的底部结束边缘(底部对齐)center
:将网格对齐到 网格容器 的垂直中间位置(垂直居中对齐)stretch
:调整 网格项(grid items) 的高度,允许该网格填充满整个 网格容器 的高度space-around
:在每个网格项之间放置一个均匀的空间,上下两端放置一半的空间space-between
:在每个网格项之间放置一个均匀的空间,上下两端没有空间space-evenly
:在每个网格项目之间放置一个均匀的空间,上下两端放置一个均匀的空间
1
2
3.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}grid-auto-columns / grid-auto-rows
指定任何自动生成的网格轨道(grid tracks)(又名隐式网格轨道)的大小。当网格中的网格项多于单元格时,或者当网格项位于显式网格之外时,就会创建隐式轨道
1
2
3
4
5
6
7
8.container {
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}grid-auto-flow
如果你有一些没有明确放置在网格上的网格项(grid items),自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。
值:
row
:告诉自动布局算法依次填充每行,根据需要添加新行 (默认)column
:告诉自动布局算法依次填入每列,根据需要添加新列dense
:告诉自动布局算法在稍后出现较小的网格项时,尝试填充网格中较早的空缺
子元素 网格项(Grid Items) 属性
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。
grid-column-start
/grid-row-start
是网格项开始的网格线,grid-column-end
/grid-row-end
是网格项结束的网格线。值:
<line>
:可以是一个数字引用一个编号的网格线,或者一个名字来引用一个命名的网格线span <number>
:该网格项将跨越所提供的网格轨道数量span <name>
:该网格项将跨越到它与提供的名称位置auto
:表示自动放置,自动跨度,默认会扩展一个网格轨道的宽度或者高度
1
2
3
4
5
6.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto
}grid-column / grid-row
分别为
grid-column-start
+grid-column-end
和grid-row-start
+grid-row-end
的简写形式。值:
<start-line> / <end-line>
:每个网格项都接受所有相同的值,作为普通书写的版本,包括跨度
1
2
3
4.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}grid-area
为网格项提供一个名称,以便可以 被使用网格容器
grid-template-areas
属性创建的模板进行引用。 另外,这个属性可以用作grid-row-start
+grid-column-start
+grid-row-end
+grid-column-end
的简写。值:
<name>
:你所选的名称<row-start> / <column-start> / <row-end> / <column-end>
:数字或分隔线名称
1
2
3
4
5
6.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-d {
grid-area: header
}justify-self
沿着 inline(行)轴线对齐网格项( 相反的属性是
align-self
,沿着 block(列)轴线对齐)。此值适用于单个网格项内的内容。值:
start
:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)end
:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)center
:将网格项对齐到其单元格的水平中间位置(水平居中对齐)stretch
:填满单元格的宽度(默认值)
1
2
3
4
5
6.item {
justify-self: start | end | center | stretch;
}
.item-a {
justify-self: start;
}align-self
沿着 block(列)轴线对齐网格项(grid items)( 相反的属性是
justify-self
,沿着 inline(行)轴线对齐)。此值适用于单个网格项内的内容。值:
start
:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)end
:将网格项对齐到其单元格的底部结束边缘(底部对齐)center
:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)stretch
:填满单元格的高度(默认值)
1
2
3.item{
align-self: start | end | center | stretch;
}几个常见布局问题
水平居中
margin:0 auto;
最常见的水平居中解决方案,但有其局限性:块级元素,已知宽度,父级元素有宽度
text-align + inline-block
在父级元素上设置text-align:center;将需要居中的元素设置为inline-block(或inline)
position绝对定位
1
2
3position:absolute;(同时设置父级元素relative)
left:50%;(包括了元素本身的宽度)
transform:translateX(-50%);flex弹性布局之justify-content
在父级添加
1
2
3
4#parent{
display:flex;
justify-content:center;
}
垂重居中
左边固定右边自适应
1
2
3
4
5
6
7
8
9
10
11
12.left {
float: left;
width: 200px;
height: 400px;
background-color: #fff277;
}
.right {
background-color: #b5eeff;
margin-left: 210px;
}
<div class="left"></div>
<div class="right"></div>圣杯布局
在父级添加左右padding,将三栏全部挤到中间,然后在两侧边栏添加相对定位,配合left和right属性,将它们挪向两边,为中间内容腾出位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37.container {
overflow: hidden;
padding: 0 200px;
}
.middle {
width: 100%;
height: 400px;
float: left;
background-color: yellow;
}
.left {
width: 200px;
height: 400px;
float: left;
background-color: blue;
margin-left: -100%; /*挤到上一行*/
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 400px;
float: left;
background-color: darkseagreen;
margin-left: -200px; /*挤到上一行*/
position: relative;
right: -200px;
}
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
双飞翼布局
在中间栏的div中嵌套一个div,内容写在嵌套的div里,对嵌套的div设置margin-left和margin-right。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41.container {
overflow: hidden;
}
.middle {
width: 100%;
height: 400px;
float: left;
background-color: yellow;
}
.left {
width: 200px;
height: 400px;
float: left;
background-color: blue;
margin-left: -100%;
}
.right {
width: 200px;
height: 400px;
float: left;
background-color: darkseagreen;
margin-left: -200px;
}
/*解决遮挡*/
#inside {
margin: 0 210px;
height: 400px;
background-color: red;
}
<div class="container">
<div class="middle">
<div id="inside">middle</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>