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;
}
</style>
<html>
<div>div1</div>
<div>div2</div>
</html>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
1)设置margin-left之前