- 浏览: 1563543 次
- 性别:
- 来自: 吉林
文章分类
- 全部博客 (624)
- C/C++ (33)
- Java (181)
- 网络相关 (7)
- 我爱篮球 (3)
- 也爱足球 (4)
- 杂谈 (1)
- 系统架构 (3)
- Web Service (14)
- Framework (3)
- 系统命令 (8)
- 管理平台相关 (8)
- 其它 (35)
- Websphere (1)
- Struts2 (24)
- Hibernate (16)
- Spring (23)
- javascript (20)
- jquery (23)
- html/css/div (28)
- 数据库 (40)
- JavaWeb (27)
- 设计模式 (2)
- 文档编写 (3)
- SVN (5)
- Ant (1)
- Maven (13)
- 软件项目管理 (8)
- AOP (1)
- kindeditor (1)
- JSON (2)
- Servlt/JSP (4)
- WordXML (2)
- XML (12)
- 面试相关 (7)
- Tomcat (11)
- 性能与调优 (29)
- 职业发展 (2)
- 操作系统 (7)
- AJAX (2)
- DWR (1)
- Eclipse (12)
- 持续集成 (3)
- 批处理命令 (1)
- Mozilla Rhino (2)
- 新鲜技术 (18)
- Apache mina (2)
- 底层技术 (18)
- Linux (22)
- 新鲜技术,IT历史 (1)
- 敏捷开发 (1)
- 版本控制 (5)
- 较火技术 (7)
- 集群 (2)
- Web前端 (13)
- 报表工具 (3)
- 网站架构 (5)
- 大数据 (8)
- 分布式存储 (5)
- 云计算 (8)
- TCP/IP协议 (1)
- 负载均衡 (3)
- 硬件 (1)
- 表现层技术 (3)
- Velocity (3)
- jvm (6)
- 并发编程 (10)
- hadoop (8)
- 数据结构和算法 (12)
- 计算机原理 (1)
- 测试驱动开发-TDD (3)
- 开发技巧 (1)
- 分词器 (1)
- 项目构建工具 (2)
- JMX (4)
- RMI (1)
- 测试技术 (22)
- 网络完全 (1)
- Git (4)
- apache开源包 (4)
- Java常用 (1)
- mock (2)
- OSGi (2)
- MongoDB (1)
- JBPM (1)
- Storm (3)
- mysql (2)
- telnet (1)
- 正则表达式 (1)
- bootstrap (4)
- Apache ActiveMQ (1)
- redis (9)
- Nginx (2)
- rsync+inotify文件同步 (2)
- testng (1)
- 原型设计工具 (1)
- 工程能力 (1)
- 风险控制 (3)
- ibatis (1)
- 分布式 (4)
- 安全技术 (1)
- 计算机基础 (4)
- 消息中间件 (1)
- UML (2)
最新评论
-
u012236967:
java命令执行jar包(里面的main函数)的方式(包括依赖其它的jar包问题) -
世界尽头没有你:
Selenium自动化测试从入门到精通(Java版)百度网盘地 ...
自动化测试工具 Selenium WebDriver 入门教程(针对主流浏览器) -
小小西芹菜:
我喜欢代码简洁易读,服务稳定的推送服务,前段时间研究了一下go ...
dwr实现Reverse Ajax推送技术的三种方式 -
hellozhouqiao:
楼主,请教一点问题.现在我们需要在excel 的页脚里面加上图 ...
FreeMaker + xml 导出word(处理目录,图片和页眉页脚问题) -
乱在长安:
使用Timer会有各种各样的问题好嘛?!书上推荐使用Sched ...
DelayQueue (ScheduledThreadPoolExecutor调度的实现)
遇到过的问题:内层div中有button,且div是浮动的,外层div设置的高度是auto(还是没设置?),最外围的div.body中既没有float=left|right,又没有overflow-y控制(好像加上这两个之一也会解决接下来描述的问题),那么外层div之后的文字就会挤进来与button并列了。解决方法是设置外层的div的height,当然要大于内层div的高度的。
在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示:
- <div style="width:300px; background-color:Red;">
- 测试
- <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
- 左边
- </div>
- </div>
如果要解决这个问题,可以在外层的CSS中加上“overflow:auto”。
在CSS中overflow属于用来说明当内容溢出元素框时要怎么处理,从上图中可以看出,内层已经溢出了外层,所以需要使用overflow属性来指如何显示内层中。overflow属性的默认值是visible,也就是不管它是怎么溢出的,溢出的内容不裁剪,任其显示在元素框外面。
除了visible值之后,overflow属性还有以下几个值:
- hidden:内容会被裁剪,溢出的部分看不到。
- scroll:使用滚动条来查看溢出的部分,始终显示滚动条。
- auto:如果内容需要裁剪,则等于scroll,显示滚动条;否则不显示滚动条。
- inherit:从父元素中继承overflow属性值。不过以前的IE版本都不支持该属性值,包括IE8,IE9还没试过。
由于本例中,外层的CSS没有指定overflow属性,所以默认为visible,也就是不管它怎么个溢出法,所以,只要将外层的CSS中加上overflow:auto,如以下代码所示:
- <div style="width:300px; background-color:Red; overflow:auto;">
- 外层
- <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
- 内层
- </div>
- </div>
也许有人会说,为什么设置overflow:auto之后,外层就包含了内层,而不是将溢出的那部分使用滚动条显示出来呢?这是因为没有指定外层的高度,所以它就自适应了。如果指定了外层的高度,而内层的高度又大于外层的高度,那么就会显示滚动条了。如以下代码所示。
- <div style="width:300px; background-color:Red; overflow:auto; height:80px;">
- 外层
- <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
- 内层
- </div>
- </div>
发表评论
-
ibootstrap可视化前端设计网站及bootstrap前端框架
2015-03-03 14:05 21871. http://www.ibootstrap.cn/ ... -
loading菊花 、table滚动条 、dynatree树形插件(包括搜索)、div布局
2015-03-02 18:00 1163#InitVmVar <style type= ... -
给Table加滚动条,也适合其它所有元素
2015-02-12 19:52 987<style type="text/css&q ... -
jquery easy ui(包含各种常用web组件)
2015-02-04 16:12 1036http://www.jeasyui.com/index.ph ... -
14款Web开发速查表(多图)
2014-08-10 23:31 4666转自:http://blog.csdn.net/ithome ... -
按键盘的删除键导致网页后退的问题
2014-02-26 16:15 4993禁用Backspace键 ,ASP.NET ... -
2013年前端开发工具最强盘点
2014-01-14 14:23 1296概述:前端开发人员不要错过的巨强盘点,全面覆盖了原型设计 ... -
前端开发有用的工具及技术
2014-01-14 13:11 588一、highcharts插件。 ... -
AngularJS(带有MVC模式的开源javascript框架)
2014-01-07 23:45 2304AngularJS 维基百科,自由的百科全书 跳转 ... -
Bootstrap(好用的web前端开发框架,方便制定页面及各种元素)
2013-12-30 18:50 866中文网址:http://www.bootcss.com/ ... -
IE下点击带有链接的图片无法跳转的问题(谷歌浏览器等可以)
2013-11-20 20:01 1199<!--StartFragment --> 下面 ... -
jqGrid使用详解
2013-06-04 18:03 3730jquery服务器parametersfunctionaj ... -
Jtidy将html转换成xml(转)
2013-04-16 09:53 2235转自:http://technicolor.iteye.co ... -
JTidy参数详解
2013-04-16 09:40 1550Quick Reference HTML Tidy Con ... -
右键弹出菜单的定位问题
2013-03-19 18:51 2026现在做的项目中 ... -
Html编辑器KindEditor详细介绍
2013-03-18 19:20 5404编辑器调用方法1.下载 KindEditor 最新版本。打 ... -
div拖拽的例子
2013-03-15 13:03 1067<html><head><me ... -
event对象的clientX,clientY与offsetX,offsetY有何不同?还有x,y?(转)
2013-03-14 16:11 1254转自: http://hi.baidu.com/lhcli ... -
为html 编辑器xheditor内部的元素添加事件(涉及控制editor元素以及为其在iframe中添加事件)
2013-03-12 20:30 1452这些日子项目中 ... -
开启Html编辑模式的contentEditable属性
2013-03-12 11:11 2155contentEditable html中的一个属性。设置h ...
相关推荐
外部DIV如何强制宽度不被内部DIV撑开
div中的内容没有把div撑开的原因及解决办法
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
DIV遮罩层 遮罩所有工作区域 简单的方法
div层的使用,div层的基本使用。包括css,div的定位
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
非常清爽的div层,漂亮div层 精美div层
可以将div里面的内容转换为图片,并且保存下载到本地
这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的知识,自己摸索哦。终于成功了,O(∩_∩)O~ 分享出来。...
DIV 层 网站设计DIV 层 网站设计DIV 层 网站设计
table转div工具,很棒的工具,直接把table转为div+css
ps切出来的table,直接转div,转css超级方便的一款工具。
/*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id")....
div弹出层 定位问题的 处理
通俗的讲,就是一个div内部,我们用float和margin布局元素。 BFC布局规则:1.内部的Box会在垂直方向,一个接一个地放置。2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3.每个元素...
DIV层上下移动
层叠样式,将一个div覆盖到另一个div上
可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...