前端学习（526）：等分布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>等分布局</title><style>.col1{background-color: black;float: left;width: 25%;height: 300px;}.col2{background-color: lightblue;float: left;width: 25%;height: 300px;}.col3{background-color: red;float: left;width: 25%;height: 300px;}.col4{background-color:yellow;float: left;width: 25%;height: 300px;}</style>
</head>
<body><div class="parent"><div class="col1"></div><div class="col2"></div><div class="col3"></div><div class="col4"></div></div>
</body>
</html>

运行结果

前端学习（526）：等分布局相关推荐

前端学习总结——CSS布局方式之传统布局
传统布局传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局例如:采用表格方式实现如下简单模型的布局 (1)固定布局即用具体的像素值来确定模型的宽和高等值. ...
前端学习（530）：等分布局得间距方案第二种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（529）：等分布局存在间距得实现得解决方案
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（527）：等分布局第二种方案
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
前端学习六——html5+CSS3
前端学习六--html5+CSS3 HTML5 H5新增语义标签多媒体标签 audio音频标签 audio音频标签常见属性音频标签语法视频标签video 视频标签语法 H5新增input表单.表 ...
html画布20等分,实现CSS等分布局的4种方式 - 小火柴的蓝色理想
前面的话等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差 [1] ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...

前端学习（526）：等分布局

前端学习（526）：等分布局相关推荐

最新文章

热门文章