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

jingmingtan

jingmingtan

2016-02-19 13:30

下面是个简单易学的避免页面布局被大尺寸图片和长字符串破坏教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  有没有办法可以解决呢?

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

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

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

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

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


——您可以运行代码察看特效,您也可以复制或者另存源代码。本代码由天极网页陶吧提供。

点击放大此图片

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

展开更多 50%)
分享

猜你喜欢

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

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

字符串分割

编程语言 网络编程
字符串分割

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

截取固定长度字符串显示在页面

ASP
截取固定长度字符串显示在页面

字符串格式定义

电脑入门
字符串格式定义

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ORACLE 截断字符串

编程语言 网络编程
ORACLE 截断字符串

复制字符串中的字符

编程语言 网络编程
复制字符串中的字符

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

改变ACCESS数据库的密码

改变ACCESS数据库的密码

一个经典的符合web标准的flash插入法

一个经典的符合web标准的flash插入法
下拉加载更多内容 ↓