CSS布局之两列布局一列固定一列自适应
2016-10-21 14:55
549 查看
一、通过浮动和margin-left
.left 设float:left
.right 设margin-left=.left宽度+间距
.footer 清除浮动
左右高度无限制
二、通过position和margin-left
注意:左列高度<右列高度
.left 设绝对定位
.right设margin-left=.left宽度+间距
三、通过position和偏移属性
注意:左列高度>右列高度
父包裹层.wrap 设置相对定位
.right 根据父包裹层进行偏移 right:0使得与父包裹层无间隙
四、position和float
这个方法挺复杂的,其实通过三就可以实现
五、BFC
CSS之BFC详解
深入理解BFC和Margin Collapse
<div class="left">左列 </div> <div class="right">右列 </div> <div class="footer">footer </div>
<style type="text/css"> *{<span style="font-family:Microsoft YaHei;"> </span>margin:0; padding:0; } body{ width: 800px; margin:auto; } .left{ background-color: red; width:200px; height:20px; <span style="color:#CC0000;"><strong> float: left;</strong> </span> } .right{ background-color: blueviolet; height:30px; <strong><span style="color:#CC0000;">margin-left: 220px;</span></strong> } .footer{ background-color: coral; clear: both; } </style>
.left 设float:left
.right 设margin-left=.left宽度+间距
.footer 清除浮动
左右高度无限制
二、通过position和margin-left
<span style="font-size:12px;"><div class="left">左列 </div> <div class="right">右列 </div> <div class="footer">footer </div></span>
<span style="font-size:12px;">*{ margin:0; padding:0;} body{ margin:auto; width: 800px;} .left{ background-color: red; width:200px; height:300px; <strong> <span style="color:#990000;">position:absolute;</span></strong>} .right{ background-color: blueviolet; height:500px; <span style="color:#990000;"><strong>margin-left: 220px;</strong></span> } .footer{ background-color: coral; } </span>
注意:左列高度<右列高度
.left 设绝对定位
.right设margin-left=.left宽度+间距
三、通过position和偏移属性
<div class="wrap"> <div class="left">左列 </div> <div class="right">右列 </div> </div> <div class="footer"> 4000 footer </div>
*{ margin:0; padding:0;} body{ width: 800px;margin:auto; } .wrap{ background-color: gray; <strong><span style="color:#990000;">position: relative;</span></strong> } .left{ background-color: red; width:200px; height:500px;} .right{ position:absolute;background-color: blueviolet; height:500px; <strong><span style="color:#990000;">left: 220px; top:0; right: 0;</span></strong>} .footer{ background-color: coral;}
注意:左列高度>右列高度
父包裹层.wrap 设置相对定位
.right 根据父包裹层进行偏移 right:0使得与父包裹层无间隙
四、position和float
<span style="font-size:12px;"><style type="text/css"> *{ margin:0; padding:0;} body{ margin:auto; width: 800px;} .wrap{ <strong><span style="color:#CC0000;"> position:relative; </span></strong>} .left{ background-color: red; height:500px;<strong><span style="color:#CC0000;"> float: left;</span></strong>} .right{ background-color: blueviolet; height:300px;<span style="color:#CC0000;"> position: absolute; left:220px; right:0;</span> } .footer{ background-color: coral;<strong><span style="color:#CC0000;"> clear: both; </span></strong>} </style> </span>
<div class="wrap"> <div class="left">左列 </div> <div class="right">右列 </div> </div> <div class="footer">footer </div>
这个方法挺复杂的,其实通过三就可以实现
五、BFC
CSS之BFC详解
深入理解BFC和Margin Collapse
相关文章推荐
- CSS基础篇--css实现两列布局,一列固定宽度,一列宽度自适应方法
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
- css两列布局,一列固定宽度,另一列自适应宽度
- css三列布局,最右侧div固定,其他两列自适应
- 【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应
- CSS 经典案例 两列布局 左固定 右自适应 高度自适应
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度
- html 三列布局(两列自适应,一列固定宽度)
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- html 三列布局(两列固定宽度,一列自适应)
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- CSS布局,上下布局,左右布局,一列固定,剩下的自适应屏幕大小
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- DIV/CSS 实现三列,左右两列固定,中间一列自适应
- CSS 两列布局---左侧固定,右侧自适应
- css布局—一列宽度固定,一列宽度自适应
- css 一列固定一列自适应布局-flex布局实现
- CSS-左侧固定宽度,右侧自适应宽度的两列布局实现方法总结
- 一个三行两列右列固定左列自适应宽度的CSS
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)