前端学习（529）：等分布局存在间距得实现得解决方案

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

运行结果

前端学习（529）：等分布局存在间距得实现得解决方案相关推荐

前端学习（530）：等分布局得间距方案第二种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（528）：等分布局存在间距得问题
前端学习总结——CSS布局方式之传统布局
传统布局传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局例如:采用表格方式实现如下简单模型的布局 (1)固定布局即用具体的像素值来确定模型的宽和高等值. ...
前端学习（527）：等分布局第二种方案
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（526）：等分布局
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端布局推进剂 - 间距规范化
我是一个爱折腾设计的前端,一直都在标榜自己的页面还原是多么的牛 X .怎么做到页面还原?我有一个最笨但是有效的方法,就是把设计稿直接存成图片,作为背景图然后临摹着设计稿进行开发.我觉得自己太有才了.像 ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
前端学习day28：响应式布局、阿里图标等
1. 阿里图标使用场景及原理原理:将小图标定义成字体,通过引入字体来展示这些小图标.因为此时的小图标相当于是一个文字,所以支持文字对应的所有样式. 使用步骤 1.打开阿里图标官网(https:// ...

前端学习（529）：等分布局存在间距得实现得解决方案

前端学习（529）：等分布局存在间距得实现得解决方案相关推荐

最新文章

热门文章