圣杯布局和双飞翼布局实现中间部分宽度自适应_移动端使用圣杯布局,中间部分布局压缩怎么办-CSDN博客

本文链接：https://blog.csdn.net/qq_32375417/article/details/78551568

双飞翼布局和圣杯布局都采用了浮动，以及在中间的那个盒子需要放在第一个。

圣杯布局采用的是相对定位(position:relative;)和浮动(float:left;)

圣杯布局代码:
<style type="text/css">
*{
margin:0;
padding:0;
}
.container{
padding: 0 220px 0 200px;
background: #eee;
min-width: 200px;
}
.center,.left,.right{
float:left;
min-height: 130px;
position: relative;
}
.center{
width:100%;
background: lightblue;

}
.left{
margin-left: -100%;
left:-200px;
width: 200px;
background: lightgreen;
}
.right{
margin-left: -220px;
right:-220px;
width:220px;
background: pink;
}
.cleft,.cright{
width:400px;
min-height: 50px;
float: left;
}
.cleft{
background: red;
}
.cright{
background: blue;
}
</style>
<body>
<div class="container">
<div class="center">
<div class="cleft"></div>
<div class="cright"></div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>

双飞翼布局采用的是浮动(float:left;)

双飞翼布局：在中间的那部分添加内容需要在里面在写一个盒子，然后对盒子设置margin-left:200px;(左边的盒子宽度),margin-right:220px;(右边盒子的宽度)，这样写的内容才不会被两边盒子挡住，还需要设置字换行word-break: break-all;

双飞翼布局代码：
<style>
*{
margin:0;
padding:0;
}
section{
min-height: 400px;
min-width: 600px;
}
.left,.center,.right{
float: left;
min-height: 300px;
}
.left{
width:200px;
margin-left: -100%;
background: lightgreen;
}
.right{
margin-left: -220px;
width: 220px;
background: red;
}
.center{
width:100%;
background: #666;
}
.cleft,.cright{
width:400px;
min-height: 50px;
float: left;
}
.cleft{
background: red;
}
.cright{
background: blue;
}
.center_content{
margin-left: 200px;
font-size: 60px;
margin-right: 220px;
word-break: break-all;
}
.clearboth{
clear: both;
}
</style>
<body>
<section>
<div class="center">
<div class="center_content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="clearboth"></div>
</section>

</body>

内容参考：https://www.cnblogs.com/imwtr/p/4441741.html