float解决方案，DOM顺序与视觉顺序相符
一个左浮动一个右浮动, 中间的元素,利用calc给一个固定的宽度,并设置成行内块元素,即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body {
width: 100%;
height: 100%;
/*background: chocolate;*/
}
.box1 {
height: 500px;
width: 300px;
float: left;
background: cadetblue;
}
.box2 {
width: calc(100% - 600px);
height: 500px;
display: inline-block;
background: cornflowerblue;
}
.box3 {
height: 500px;
width: 300px;
float: right;
background: chocolate;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">123</div>
<div class="box2">456</div>
<div class="box3">789</div>
</div>
</body>
</html>
效果图
float解决方案，DOM顺序与视觉顺序不符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body {
width: 100%;
height: 100%;
/*background: chocolate;*/
}
.container {
/*height: 300px;*/
}
.left {
width: 300px;
float: left;
height: 100px;
background: #FF79BC;
}
.center {
height: 200px;
/*text-align: center;*/
font-size: 30px;
color: #fff;
background: #666;
margin: 0 300px;
}
.right {
width: 300px;
height: 100px;
float: right;
background: #CA8EFF;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center">float解决方案，DOM顺序与视觉顺序不符</div>
</div>
</body>
</html>
效果图
position解决方案
<div class="box">
<div class="box1">123</div>
<div class="box2">456</div>
<div class="box3">789</div>
</div>
* {
padding: 0;
margin: 0;
}
html, body{
width: 100%;
height: 100%;
/*background: chocolate;*/
}
.box {
height: 100%;
position: relative;
}
.box1{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: cadetblue;
}
.box3{
position: absolute;
top: 0;
right: 0;
width: 300px;
background: cornflowerblue;
height: 100%;
}
.box2{
margin: 0 300px;
background: cornsilk;
height: 100%;
}
image
圣杯布局(margin负值解决方案),DOM顺序与视觉顺序不符
<div>
<div class="inner">
<div class="center">圣杯布局(margin负值解决方案),DOM顺序与视觉顺序不符</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<style>
.inner {
width: 100%;
float: left;
}
.center {
margin: 0 300px;
background: cornsilk;
}
.left {
width: 300px;
float: left;
margin-left: -100%;
background: cadetblue;
}
.right {
width: 300px;
float: left;
margin-left: -300px;
background: cornflowerblue;
}
</style>
image
弹性盒子flex解决方案
<div class="box">
<div class="left">左</div>
<div class="center">居中</div>
<div class="right">右</div>
</div>
<style>
.box {
display: flex;
}
.left {
flex: 0 0 300px;
background: cornflowerblue;
}
.center {
flex: 1;
background: cadetblue;
}
.right {
flex: 0 0 300px;
background: cornsilk;
}
</style>
image
表格布局(等高)
<div class="container ct4">
<div class="left l4">左</div>
<div class="center c4">表格布局(等高)</div>
<div class="right r4">右</div>
</div>
.ct4 {
display: table;
width: 100%;
margin-bottom: 100px;
}
.ct4 > div {
display: table-cell;
height: 500px;
}
.l4 {
width: 300px;
background: cornsilk;
}
.r4 {
background: cadetblue;
width: 300px;
}
image
网格Grid解决方案
<div class="container ct6">
<div class="left l6"></div>
<div class="center c6">网格Grid解决方案</div>
<div class="right r6"></div>
</div>
<style>
.ct6 {
display: grid;
grid-template-columns: 300px auto 300px;
}
.left {
background: cadetblue;
}
.right {
background: chocolate;
}
.center {
background: cornsilk;
height: 200px;
}
</style>
总结
建议用前几种方案,因为后面几种的方案,有兼容性
网友评论