避免页面布局被大尺寸图片和长字符串破坏

页面|字符串

  用TABLE和DIV做页面布局设计的时候,遇到大尺寸的图片和长英文字符串,布局中定义的尺寸都会被破坏,导致页面布局变形.

  有没有办法可以解决呢?

  用CSS的属性OVERFLOW:hidden可以来控制,这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.

  要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.

  在使用DIV做页面布局的时候,可以在大布局上定义,比如在左栏,右栏,中栏里面,也可以针对页面中具体的某个布局元素.

  在用ul和li做图片列表排列的时候,也可以用这个,这样避免一些大尺寸图搞乱布局,也可以解决浏览器窗口缩小时,li元素自动回行排列出错的问题.

  BTW:用overflow:auto,还可以在页面里模仿出IFRAME的效果,回头写出来

没有使用overflow:hidden<br /><div style="width:200px;background:green;color:#fff;padding:8px">265.com265.com265.com265.com265.com265.com265.com265.com265.com265.com<br /><img src="200741141333450.gif" /></div><br />使用了overflow:hidden<br /><div style="overflow:hidden;width:200px;background:green;color:#fff;padding:8px">http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/http://homepage.yesky.com/<br /><img src="200741141333450.gif" /></div>
——您可以运行代码察看特效,您也可以复制或者另存源代码。本代码由天极网页陶吧提供。

时间: 2024-08-06 19:56:08

避免页面布局被大尺寸图片和长字符串破坏的相关文章

CSS实现避免页面布局被大尺寸图片和长字符串破坏

css|页面|字符串 用TABLE和DIV做页面布局设计的时候,遇到大尺寸的图片和长英文字符串,布局中定义的尺寸都会被破坏,导致页面布局变形. 有没有办法可以解决呢? 用CSS的属性OVERFLOW:hidden可以来控制,这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱. 要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以. 在使用DIV做页面布局的时候,可以在大布局上定义,比如在左栏,右栏,中

jQuery实现等比例缩放大图片让大图片自适应页面布局_jquery

在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

css页面布局vertical-align:middle;和float:

问题描述 css页面布局vertical-align:middle;和float: <div class="row"> <div class="cell regist regist_show"> <b:message key="validatecode" /> </div> <div class="cell regist" style="float:left;&q

asp.net基础学习之前端页面布局_实用技巧

前端就是给人看的界面,后台人员不仅要知道后台代码的编写,更要知道前端的布局.有时候要比前端人员知道的还要多,因为有可能前端人员是个21天精通ps的大师级人物.这时候你可以自己写前端. 1.CSS •CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.就语法而言, •CSS是一种容易学习的语言.它的"语法"仅由几个概念组成,使得它相当容易入门.CSS的难点在于所有主流浏览器呈现页面的方式.尽管实际上每

CSS3与页面布局学习总结(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机-内核. 多年前我们一直为IE6兼容烦恼,为它没少加

Div+CSS布局入门教程(一) -- 页面布局与规划

css|规划|教程|入门教程|页面 一.页面布局与规划 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第

实例详解DIV+CSS布局入门之页面布局与规划

css|规划|详解|页面 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来

CSS网格布局:制作网页图片幻灯图库特效

文章简介:这里我们指导您使用网格布局来创建一个图片游览库的灯箱效果.我们使用网格布局组织页面的内容,和用媒体查询来优化布局,用于横屏竖屏都能查看.在竖屏中,浏览器高度大于其宽度,在横屏中,浏览器宽度大于其高度. 毫无疑问,当开发人员谈到网页布局时会有很多选择.为了确保你的布局可以适应不同设备.方向和屏幕大小,你需要慎重考虑清楚,你要使用哪些方法来布局.网格布局是一个新的布局方法,使你可以把网页的主要区域在游览器窗口内设置一个固定大小或者自由空间,你也可以两个同时使用. 因为网格布局使用您能够根据