0
0
Guanhui
发布时间：2020-06-28 18:06:21
|2883人浏览过
|来源于jb51
转载
最近在进行开发的过程中，有遇到两端对齐的布局，是按照百分比来进行布局的，之前有用过flex布局，但是flex布局，使用两端布局的时候，会出现一切bug。比如，下面的是动态生成的时候，三列或者多列就会把下面的列表分布在两边。
虽然可以解决，但是还是想看一下用普通的css是如何布局的。因为就写了这个。
在网上找了一些教程，都是写死的宽度来进行操作的。我把它改造成了百分比的格式，简单来记录一下。
先上css
再上html
把这些套入到html就可以看到效果了。
如下图
立即学习“前端免费学习笔记（深入）”；
最后总结一下那个公式
x = 10px; 即：想要的间距 y = 4 即：想要排列的个数 父级： width: calc(100% + (x * 2)); 子级： width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );
推荐教程：《CSS教程》
相关文章
css scoped 样式是如何限制选择器的_作用原理说明
css 想实现多列等分卡片布局怎么办_grid-template-columns repeat 3 1fr
css浮动布局与flex布局的对比_何时使用float
css 想制作导航栏悬浮下拉效果怎么办_hover 与 position absolute 配合
css 过渡与阴影变化_控制 box-shadow 的动态效果
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。
10
2026.01.16
热门下载
精品课程
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
