css布局之负margin妙用及其他实现资源-CSDN文库

156 浏览量 2020-09-27 21:59:14 上传评论收藏 141KB PDF 举报

资源推荐

资源详情

资源评论

css布局之负布局之负margin妙用及其他实现妙用及其他实现

主要为大家详细介绍了css布局之负margin妙用及其他实现的相关资料，具有一定的参考价值，感兴趣的小伙伴

们可以参考一下

相信大家在项目的开发中都遇到过这样的需求，一行放X（X>1）个块且相邻块之间的间距相同。

大概就是上面这个样子，下面介绍几种实现的方式。

1.负负margin大法大法

设置好元素的宽度和留白占满父级的宽度，然后设置父级的margin-left为留白的负留白的宽度

CSS Code复制内容到剪贴板

1. <style type="text/css">

2. *{

3. margin: 0;

4. padding: 0;

5. }

6. img{

7. vertical-align: middle;

8. }

9.

10. ul>li{

11. float: left;

12. }

13.

14. ul>li>img{

15. width: 100%;

16. }

17.

18. .test1{

19. padding: 0 2%;

20. margin-left: -3.3%;

21. }

22.

23. .test1>li{

24. width: 30%;

25. margin-left: 3.3%;

26. }

27.

28. </style>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38691641

粉丝: 5
资源: 929

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip