话不多说,showCode
<template>
<div class="elmentArrage">
<div class="part1">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="part2">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<div class="part3">
<div class="left"></div>
<div class="center">
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
asdfdasfsadfasdfasdfasdddddddddddddddddddddd
</div>
<div class="right"></div>
</div>
<div class="part4">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
</template>
<script>
// 两边宽度固定, 中间自适应
export default {
}
</script>
<style scoped lang="less">
.left {
background-color: #ed4014;
width: 200px;
}
.center {
background-color: #2db7f5;
}
.right {
background-color: #19be6b;
width: 200px;
}
/*calc */
.part1 {
overflow: hidden;
margin-bottom: 20px;
font-size: 0; /* 去除inline-block元素的间距 */
div {
font-size: 12px; /* 去除inline-block元素的间距 */
height: 200px;
display: inline-block;
}
.center {
width: calc(100% - 400px)
}
}
// 利用浮动和定位 这种情况下center要在最后
.part2 {
margin-bottom: 20px;
overflow: hidden;
div {
height: 200px;
}
.left{
display: inline-block;
float: left;
}
.right {
float: right;
display: inline-block;
}
.center {
position: relative; // 用absolute会有问题
margin-right: 200px;
margin-left: 200px;
}
}
// 定位: 这种情况下需要内容把center撑开,没有内容的情况下,center宽度就为0
.part3 {
position: relative;
font-size: 0;
margin-bottom: 20px;
div {
font-size: 12px;
height: 200px;
display: inline-block;
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
.center {
margin: 0 200px;
position: relative;
}
}
// flex
.part4 {
display: flex;
margin-bottom: 20px;
div {
height: 200px;
}
.left {
flex-shrink: 0;
}
.right {
flex-shrink: 0; // 没有这个属性,两边会被压缩
}
.center {
flex-grow: 1; // 没有这个属性,便需要用内容撑开
}
}
</style>
总结: 其实我们可以看出来这些方法就是两个原理
- 通过脱离普通文档流的方式来使两边的元素不影响中间元素的布局,通过margin来把中间元素出一定的宽度留给脱离了文档流的边缘元素
- 通过css提供的属性,来使页面动态的计算三个元素的布局宽度