1.双飞翼布局
双飞翼布局左中右三列布局,渲染顺序中间列书写在前保证提前渲染,左右两列定宽,中间列自适应剩余宽度。
双飞翼布局与圣杯布局的不同之处,圣杯布局的的左中右三列容器,中间middle多了一个子容器存在,通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度。
2.实现
2.1 代码实现
<template>
<div>
<div class="g-container">
<div class="g-middle">
<div class="g-middle-inner">
<!-- 中间区域的内容 -->
<p>middle-inner</p>
</div>
</div>
<div class="g-left">
<!-- 左侧区域的内容 -->
<p>left</p>
</div>
<div class="g-right">
<!-- 右侧区域的内容 -->
<p>right</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.g-container {
position: relative;
height: 100vh;
min-width: 400px;
&>div {
height: 100vh;
float: left;
text-align: center;
color: #fff;
line-height: 100vh;
font-size: 3vw;
}
.g-middle {
position: relative;
width: 100%;
background: #cc6630;
.g-middle-inner {
margin: 0 300px 0 200px;
}
}
.g-left {
position: relative;
width: 200px;
background: #ffcc00;
margin-left: -100%;
}
.g-right {
position: relative;
width: 300px;
background: pink;
margin-left: -300px;
}
}
</style>
实现的效果
关键点
双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置,通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度
双飞翼布局的关键点父元素不需要设置 padding
双飞翼布局的关键点 margin-left 取值为百分比时,是以其父元素的宽度为基准的
2.2一些问题
如果去掉左右的margin-left
相当于每个都是浮动,这个能理解,但是为什么基本上每个div(除了中间的子容器)都会有个position: relative呢,有点困惑。。。
3.自我认知
left和right的position: relative我可以理解成,left和right的div里面可能会有多个子div,position: relative只是为了给子div的定位先做一个拓展,毕竟这个布局也没有flex布局。所以,如果只是演示这个布局,那么left和right的position: relative是可以完全去掉的。
最外层的div的position: relative,左中右的顺序布局已经确认了的,顶多就是把整个布局相对于原来的空间偏移些位置。
但是问题又来了,既然上面的几个div的position: relative可要可不要,那我把它们的position: relative去掉,只留中间的一个div。结果是:
只看得到一个中间的div了。
div的相对定位不会对浮动元素产生影响
3.1 div的相对定位不会对浮动元素产生影响
<div class="container">
<div class="relative">相对定位元素</div>
<div class="float">浮动元素</div>
</div>
.relative {
position: relative;
top: 20px; /* 向上偏移 */
left: 20px; /* 向左偏移 */
}
.float {
float: left;
}
我们再把relative的定位 top和left去掉
可以发现,相对定位的位置变化不会对浮动元素产生影响。但是如果把浮动的元素移动到相对定位的原来空间上呢。
.float {
float: left;
margin-left: -100%;
}
这时无论相对定位的位置变化,虽然也不会影响浮动元素,但是浮动元素是不会显示出来的。
除非浮动元素的渲染顺序在前
<div class="container">
<div class="float">浮动元素</div>
<div class="relative">相对定位元素</div>
</div>
3.2问题总结
所以原来的那个问题就是左右div是浮动,中间的既有浮动也有相对定位,这个的话
当一个 div
同时拥有 position: relative
和 float: left
时,它的行为会受到 两者叠加 的影响,但最终 以 float: left
的效果为主。
具体来说:
position: relative
:- 会将该元素设置为相对定位,使其成为定位参考点。这意味着你可以使用
top
、right
、bottom
、left
属性来相对于其正常位置进行微调。
- 会将该元素设置为相对定位,使其成为定位参考点。这意味着你可以使用
float: left
:- 会将该元素浮动到左侧,使其与文本内容并排显示。它会影响元素的定位,使其脱离标准文档流,并根据
float: left
的特性进行布局。
- 会将该元素浮动到左侧,使其与文本内容并排显示。它会影响元素的定位,使其脱离标准文档流,并根据
最终效果:
- 该
div
会被浮动到左侧,就像没有position: relative
一样。 - 同时,由于
position: relative
,你可以使用top
、right
、bottom
、left
属性对其进行微调,例如:
<div style="position: relative; float: left; top: 10px; left: 20px;">
内容
</div>
在这个例子中,虽然 div
会被浮动到左侧,但它的位置会比原本位置高 10 像素,向右移动 20 像素。
总结:
float
属性会影响元素的定位和布局,而 position: relative
则让你能够对元素进行微调。当两者同时存在时,float
的效果会起主导作用,而 position: relative
则会让你可以对浮动元素进行进一步的调整。
出现这个问题感觉可以理解成middle既有相对定位的一些特性,像上面例子中的
如果左中右的div下的子div如果要定位的话,用position: relative,要么都用要么都不用