当前位置:  首页  >  前端开发  >  CSS+DIV

CSS布局之两端布局实现

这篇文章主要介绍了css布局之两端布局(利用父级负的margin)的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
先上css

再上html

 

把这些套入到html就可以看到效果了。
如下图

最后总结一下那个公式

x = 10px; 即:想要的间距
y = 4     即:想要排列的个数
父级:  width: calc(100% + (x * 2));
子级:  width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

推荐教程:《CSS教程》

以上就是CSS 布局之两端布局实现的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有