课程名称:一课全面掌握主流CSS布局
课程章节:第6章 三列布局
主讲老师:KingJ
通过学习掌握了CSS三列布局的概念、实现方式和示例,更加深刻认识到了CSS三列布局的使用情景。
三列布局一般情况下是指三列中左边两列是确定的宽度,右边一列是自动填满剩余所有空间的一种布局效果
<div class="left"></div> <div class="center"></div> <div class="right"></div>
CSS代码:
.left,.center,.right{ height: 300px; } .left{ width: 400px; background-color: #c9394a; float: left; } .center{ width: 400px; background-color: #123456; float: left; } .right{ background-color: #cccccc; margin-left: 800px; }
举一反三