CSS教程

【学习打卡】第5天 CSS三列布局

本文主要是介绍【学习打卡】第5天 CSS三列布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、课程信息

课程名称:一课全面掌握主流CSS布局

课程章节:第6章 三列布局

主讲老师:KingJ


二、课程内容

  • 三列布局的概念
  • 三列布局的实现方式
  • 三列布局的方案示例

三、课程收获

通过学习掌握了CSS三列布局的概念、实现方式和示例,更加深刻认识到了CSS三列布局的使用情景。

1 什么是三列布局

概念

三列布局一般情况下是指三列中左边两列是确定的宽度,右边一列是自动填满剩余所有空间的一种布局效果

实现方式

  • float + margin属性配合使用
  • float + overflow属性配合使用
  • display属性的table相关值使

2 三列布局方案

示例

<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;
}

举一反三


四、学习截图

图片描述

这篇关于【学习打卡】第5天 CSS三列布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!