这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例的相关资料,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
HTML实现2列布局,左侧宽度固定,右侧自适应
实现一:
<style>
body, html{padding:0; margin:0;}
// 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列
div:nth-of-type(1){
float: left; //利用浮动
// postion: absolute; //利用绝对定位
// top: 0;
// left: 0;
width: 300px;
height: 200px;
background: red;
}
// 【块级元素,默认自动填充父元素宽度,霸占一行】
// 当前:右侧块元素宽度=父元素宽度
div:nth-of-type(2){
// 设置margin-left为左侧块元素的宽度。
margin-left: 300px;
// 现在:右侧块元素的宽度=父元素宽度-margin-left
height: 220px;
background: blue;
}//在此我