-
css网页布局|三列布局-左右固定-中间自适应
- 作者:灰牛站长•发布时间:2021-07-21 10:18:07•浏览
基本思路:
- 和2列布局很相似
- 左右2列采用浮动+宽度
- 中间区域实际是用margin挤压出来的
- DOM顺序不能写乱,必须先写左右再写中间
HTML结构
<div class="left">左侧</div> <div class="right">右侧</div> <div class="main">主体</div>
CSS样式
<style> .left{ width: 200px; height: 600px; background-color: #008B8B; float: left; } .right{ width: 200px; height: 600px; background-color: #FFFF00; float: right; } .main{ height: 600px; margin-left: 200px; margin-right: 200px; background-color: #4169E1; } </style>
相关文章
-
基本思路: 左右2列采用绝对定位来布局 中间内容部分采用margin挤压出来 HTML结构 div class="container"div class="left"左侧/divdiv class="right"右侧/divdiv class="main"主体...2021-07-21 10.07.20
-
基本思路: 给2列添加一个定位的父集区块,并设置定位属性,一般设置为相对定位 给左右2个区块分别使用绝对定位 父集区块/定位父集必须设置宽度width...2021-07-21 10.07.57
-
基本思路: 要给左右2列添加一个父集区块 要给左右2个区块设置一个浮动:left/right 给父区块添加一个after伪类让子块撑开父集 HTML结构 div class="container clear...2021-07-21 10.07.07
-
基本思路: 左侧固定,并设置为左浮动 右侧主体部分设置一个左边距,它的宽度只要大于等于左侧的宽度就可以 HTML结构 div class="right"右侧/divdiv class="main"主体...2021-07-21 10.07.48
-
基本思路: 右侧固定,并设置为右浮动 左侧主体部分设置一个右边距,它的宽度只要大于等于左侧的宽度就可以 HTML结构 div class="left"左侧/divdiv class="main"主体...2021-07-21 10.07.54