float + margin 属性实现
<style>
#parent {
height: 150px;
background-color: #eee;
}
#left {
/* 第一列 200 */
width : 200px;
float: left;
height : 100px;
background-color: greenyellow;
}
#center {
/* 第二列 200 */
width : 200px;
float: left;
height : 110px;
background-color: blue;
}
#right {
/* 第三列 自适应 */
margin-left: 400px;
height : 100px;
background-color: green;
}
</style>
<div id="parent">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
table 布局
<style>
#parent22 {
display: table;
width : 100%;
}
#left22 {
/* 第一列 200 */
width : 200px;
height : 100px;
background-color: greenyellow;
display: table-cell;
}
#center22 {
/* 第二列 200 */
width : 200px;
height : 110px;
background-color: blue;
display: table-cell;
}
#right22 {
/* 第三列 自适应 */
height : 150px;
background-color: green;
display: table-cell;
}
</style>
<div id="parent22">
<div id="left22"></div>
<div id="center22"></div>
<div id="right22"></div>
</div>
绝对定位
<style>
#parent33 {
position: relative;
height: 150px;
background-color: #eee;
}
#left33 {
/* 第一列 200 */
width : 200px;
height : 100px;
background-color: greenyellow;
position: absolute;
top : 0;
left : 0
}
#center33 {
/* 第二列 200 */
width : 200px;
height : 110px;
background-color: green;
position: absolute;
top : 0;
left : 200px
}
#right33 {
/* 第三列 自适应 */
height : 140px;
background-color: blue;
position: absolute;
top : 0;
left : 400px;
right : 0
}
</style>
<div id="parent33">
<div id="left33"></div>
<div id="center33"></div>
<div id="right33"></div>
</div>
flex 弹性盒模型
<style>
#parent44 {
display: flex;
}
#left44 {
/* 第一列 200 */
width : 200px;
height : 100px;
background-color: greenyellow;
}
#center44 {
/* 第二列 200 */
width : 200px;
height : 120px;
background-color: blue;
}
#right44 {
/* 第三列 自适应 */
height : 140px;
background-color: green;
flex : 1;
}
</style>
<div id="parent44">
<div id="left44"></div>
<div id="center44"></div>
<div id="right44"></div>
</div>
Grid 网格布局
<style>
#parent55 {
display : grid;
/* 定义三列，200、200、自适应 */
grid-template-columns: 200px 200px auto;
}
#left55 {
height : 100px;
background-color: greenyellow;
}
#center55 {
height : 120px;
background-color: green;
}
#right55 {
height : 140px;
background-color: blue;
}
</style>
<div id="parent55">
<div id="left55"></div>
<div id="center55"></div>
<div id="right55"></div>
</div>
经典布局：圣杯布局
核心：左右定宽 + 中间自适应的布局效果
<style>
#left66 {
width : 200px;
height : 100px;
background-color: greenyellow;
position : relative;
}
#center66 {
width : 100%;
height : 140px;
background-color: green;
}
#right66 {
width : 200px;
height : 120px;
background-color: blue;
}
/* 第一步： 在三个容器在一行显示 */
#left66,
#center66,
#right66 {
float: left;
}
/* 第二步：左右间距留出来 父元素 padding: 200 */
#parent66 {
padding-left : 200px;
padding-right: 200px;
height: 200px;
background-color: #eee;
}
/* 第三步: 移动位置 margin负值技巧 + 定位方位技巧 */
#left66 {
margin-left: -100%;
position : relative;
left : -200px;
}
#right66 {
margin-left: -200px;
position : relative;
right : -200px;
}
</style>
<div id="parent66">
<div id="center66">中间</div>
<div id="left66">左边</div>
<div id="right66">右边</div>
</div>
中间
左边
右边
经典布局：双飞翼布局
双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案；
主要是优化了圣杯布局中开启定位的问题；
<style>
#parent77 {
height: 150px;
background-color: #eee;
}
#left77 {
width : 200px;
height : 120px;
background-color: greenyellow;
}
#center77 {
width: 100%;
}
#right77 {
width : 200px;
height : 100px;
background-color: blue;
}
/* 第一步： 在三个容器在一行显示 */
#left77,
#center77,
#right77 {
float: left;
}
/* 第二步：inner => margin */
#inner77 {
margin-left : 200px;
margin-right : 200px;
height : 140px;
background-color: green;
}
/* 第三步: 移动位置 margin负值技巧 */
#left77 {
margin-left: -100%;
}
#right77 {
margin-left: -200px;
}
</style>
<div id="parent77">
<div id="center77">
<div id="inner77">中间</div>
</div>
<div id="left77">左边</div>
<div id="right77">右边</div>
</div>
中间
左边
右边
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级📦 两列布局实战套路
上一篇
评论
