页面中有间隔的方格布局如何完美实现方法
典型的布局示例
如上图所示的布局,方格中间有一定的间隙,间隙是固定的。应该如何布局会更加完美呢,比如要保证在布局完成的情况下,可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候,这样的布局依然能够不受影响。又不用修改太多的内容。
设置宽为100%和块元素的默认宽度
现在在这里说一个问题,就是块元素的宽度默认是占满一行,我们很容易和给元素设置100%混淆。其实呢,这两个虽然表现上很容易让我们以为他们展现的效果是一样的,因为这两种方式都是占满了父元素。但是他们之间还是有很大的区别的。
他们的区别主要在于元素的宽度是随着什么而变化的,如果设置100%的话,那么该元素的width始终是和父元素保持一致的,给该元素设置的margin是不会影响该元素width变化的。当然仅有父元素的宽度会影响该元素的width变化。如果不设置宽的话,块元素是独占一行的,那么该元素的width,不仅受父元素的影响,也受该元素的margin的影响。
独占一行的块元素的宽设置margin的影响
记住以下两条规律
- 当给一个未设置宽的块级元素,设置了margin(水平方向)的话,那么margin值(正值)加上改元素的width的和等于父元素的宽度
- 当给一个未设置宽的块级元素,设置了margin(水平方向)的话,那么margin值(负值)刚好是该元素的宽度超出父元素的距离
如下图所示:
规律1示例:
规律2示例:
解决方案
划分平均区域
首先在一个横向区域,平分了5份,且横向排列,那么我们采用浮动的横向排列,且平均把每个元素设置成20%。
<ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
.list{ overflow: hidden; } .list li{ width: 20%; height: 100px; float: left; }
在每个区域中放置内容,通过margin-right隔出间隔
<ul class="list"> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> </ul>
.list{ overflow: hidden; } .list li{ width: 20%; height: 100px; float: left; }.content{ margin-right: 10px; }
此时我们可以想象到,最后一个元素还多了一个10px的间距,那么最后一步就是如何解决这个间距的问题。
拉伸父元素,隐藏尾部的间隙
我们给list再套一个元素,让list在其父元素下拉伸,刚好隐藏掉多余的部分。
<div class="wrapper"><ul class="list"> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> <li> <div class="content"></div> </li> </ul></div>
.wrapper{ width: 800px; overflow: hidden; } .list{ overflow: hidden; margin-right: -10px; } .list li{ width: 20%; height: 100px; float: left; } .content{ margin-right: 10px; }
可以查看实际效果,最终能实现我们开头所展示的效果!且这种布局方式有很多的扩展性,如果一行是4个,那么只需要把每个元素的宽设置为 25%,且在元素的个数中减去一个就行。
到此这篇关于页面中有间隔的方格布局如何完美实现方法的文章就介绍到这了,更多相关间隔方格布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
- 用 jQuery 实现页面滚动(Scroll)效果的完美方法
- 由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d
- 使用PS切片工具进行切片生成div布局的页面的方法以及如何确定图片中某个点在图片中的位置
- Tab页面布局实现的各种方法
- 关于实现页面两栏,三栏自适应布局方法总结
- angularjs项目的页面跳转如何实现(5种方法)
- 五种方法实现前端PC页面三栏布局(圣杯布局)
- CSS在页面布局中实现div垂直居中的方法总结
- 如何将页脚固定在页面底部(多种方法实现)
- java servlet 几种页面跳转的方法,需要的朋友可以参考一下 在访问网页的过程中,页面自动刷新、跳转和重定向是经常用到的,这里就说说在Java中是如何实现这些功能的! 一、页面自动刷新
- 如何使用JS等各种方法实现刷新当前页面
- 如何让页面实现自适应布局
- css如何实现n宫格布局的方法示例
- 页面常见布局以及实现方法
- CSS在页面布局中实现div水平居中的方法总结(转)
- php如何实现页面回退的两种方法
- 线性布局中如何使实现组件之间有间隔
- php如何实现页面回退的两种方法
- 如何实现footer自动适应的页面布局
- 如何将页脚固定在页面底部(多种方法实现)