需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应
将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况
正常的渲染效果如下所示：
第二种：绝对定位（position:absolute）
设置父盒子position:relative（相对定位），
三个子盒子position：absolute,
左盒子left:0,
右盒子right:0
中间盒子left:300pxright:300px
第三种：flex布局
父盒子 display:flex
左右盒子设置宽度：300px
中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩
第四种：grid布局
父盒子display: grid
grid-template-columns:300px auto 300px(分割成3列，宽度分别为300px auto 300px)
grid-template-rows:100px(占一行，行高100px)
常用到的有下面几种，供参考：
高度和宽度都自适应的圆角矩形
两列布局
三列布局
浮动布局
例如两列布局实现：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>练习使用HTML</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- DIV -->
<div id="d1">
<span>DIV</span>
</div>
<div id="d2">
<span>DIV</span>
</div>
<div id="d3">
<span>DIV</span>
</div>
</body>
</html>
css文件：
#d1{position: absolute
width: 100px
height: 100px
background-color: red
}
#d2{
position: absolute
margin-left: 100px
width: 500px
height: 100px
background-color: blue
}
#d3{
position: absolute
margin-top: 100px
width: 600px
height: 100px
background-color: yellow
}
效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）