此CSS是为了实现三列布局:左右固定,中间自适应;且浏览器会自上而下先出现中间部分。
html:
<body>
<!-- 使得浏览器先出来center -->
<div class="box">
<div class="center">
<!-- 创建一个div 开造 -->
<div class="inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
CSS:
<style>
.box {
width: 100%;
height: 300px;
background: darkblue;
margin: 0 auto;
}
.center {
width: 100%;
height: 100%;
float: left;
}
.inner {
/* width: 100px;
height: 100%;
background: darkmagenta; */
margin: 0;
}
.left {
width: 100px;
height: 100%;
background: darkgoldenrod;
float: left;
margin-left: -100%;
}
.right {
width: 100px;
height: 100%;
background: darkred;
float: left;
margin-left: -100px;
}
</style>
最后效果出来是这样的
据说认真阅读并点赞的你,代码敲的最6哦~ 有兴趣的小伙伴可以加我微信,一起讨论;V-x: dandanshen987
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。