巧用overflow属性解决中间间距问题
作者：jxdawei 来源：jxdawei's Blog 发布时间：2007-12-08 20:26:00
标签：overflow,css,div
通常我们在制作上图的时候，会分别给四个div加上不同的css属性，来实现中间间隔。但我们更希望的是不需要对html标签做标识，直接能通过css实现，今天在论坛上小志提出了一个很不错的解决方案。使用overflow:hidden属性。
或许很多人已经是这样用了，我没用过，觉得耳目一新。呵呵。其实道理很简单，我们按照正常的设置li的margin-right、margin-bottom属性，这样的结果自然会比我们期望的要多出来右边和下方的，这个时候我们通过ul的父级来设置width/height属性，然后overflow:hidden把多余的隐藏掉。好方法，呵呵！
请看效果预览页面：
https://www.aspxhome.com/examples/design/css/24928/css-overflow.html
解决方法请看图：
0
投稿猜你喜欢
- 近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做table排序对table有了一些了解，
- iamlaosong文曾经看到这样一个问题，一个字典中的元素是列表，将这个列表元素赋值给一个变量，然后修改这个列表中元素的值，结果发现，字典
- 1.最基本的作为一个本本分分的函数声明使用。 function func(){} 或 var func=function(){}; 2.作为
- python中一切皆为对象，所谓对象：我自己就是一个对象，我玩的电脑就是对象，坐着的椅子就是对象，家里养的小狗也是一个对象。。。。。。我们通
- 正则表达式在 PHP 中的应用在 PHP 应用中，正则表达式主要用于：•正则匹配：根据正则表达式匹配相应的内容•正则替换：根据正则表达式匹配
- 本文实例讲述了vue+php实现的微博留言功能。分享给大家供大家参考，具体如下：html部分：<!doctype html>&l
重读LukeW的《Web Form Design:Filling in the Blanks》感触很深，除佩服LukeW的钻研精神外，更多的- 本文实例为大家分享了python实现反向迭代的具体代码，供大家参考，具体内容如下案例： &nb
- watch的作用：监听vue实例上数据的变动示例：queryData: {name: '',creator: '&#
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR，MySQL将使用系统的默认值，通常为/tmp、
- 本文实例讲述了wxPython中listbox用法。分享给大家供大家参考。具体如下：# load a listbox with names,
- 本文实例讲述了Python模块、包(Package)概念与用法。分享给大家供大家参考，具体如下：Python中”模块”的概念在开发中，我们会
- 程序如下：＜％Function GetEmploymentStatusListDim dd = Ap
- 我就把我学习Createjs的一些心得体会向大家分享下：一.什么是CreateJS?createjs是一个轻量级的javascript库，是
- 这篇文章主要介绍了Python基于内置库pytesseract实现图片验证码识别功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具
- 一、需要的参数1、通讯用户：touser 或 通讯组：toparty2、企业ID：corpid3、应用ID/密钥：agentId,secre
- 昨天打包下载了一个服务器整站，拿到这个*.mdb的文件后，却不知道怎么用，百度了一下，才知道是一种木马打包的形式文件，不能用WINrar来解
- Oracle的逻辑运算符也是用在SQL语句中必不可少的因素，一共有三个逻辑运算符意义and双值运算符，如果左右两个条件都为真，则得到的值就为
- 本文实例为大家分享了python实现图书管理系统的具体代码，供大家参考，具体内容如下添加新书查询借阅二次添加新书(读取已有的.xls并修改)
- 为了实现将RAW格式照片一键改变整体风格，且有多种风格选择，我们可以使用神经风格迁移技术。神经风格迁移是一种基于深度学习的方法，可以将一张图
