小经验大作用 用CSS解决布局难题

xxonegao

xxonegao

2016-02-19 21:39

下面图老师小编跟大家分享小经验大作用 用CSS解决布局难题,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

  1.在一个div内嵌套两个div.

div id="1"
div id="2"/div
div id="3"/div
/div

css
#1 { width:100%;background:blue;}
#2 { width:100%;background:red;}
#3 { width:100%;background:green;}

  当div2,3里面没有异常的内容的时候,显示一切正常,但是当Div3里放一个超过屏幕宽度的图片时,div1会自动扩展,但是div2不会。这就使得显示很难看。如果用表格,div2和div3分别是两个tr,那么不存在这个问题。

  这个问题怎么解决?

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

  2. 左中右三个div

div id="left "/div
div id="right "/div
div id="center "/div

css
#left {float:left; position:relative; width:200px; left:0px;background: red;}
#right {float:right; position:relative; width:200px; right:0px;background: green;}

#center{margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;background: blue;}

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

  这是一个很简单的左右侧固定中间自适应布局。

  但是同样,你在center div里放一个超大的图片,看看会怎么样?中间一片白,centerdiv被挤到下面去了
用table,一行3个td就解决了这个问题。右侧的td会被挤到屏幕外面,但是总体布局不会乱

  用div+css布局的确好,我减少了我的网站至少60%的html。

  但是div在自适应和异常处理上面,我没找到好的的方法。

  当然,有的人可能说,为什么要放一个超大的图片?我的回答是,这是用户输入。我是做程序出身,对于软件来说,你永远也想象不到用户会输入什么样的数据.....所以我们的软件/页面的容错性必须要好。Table,就我目前看来,在容错这个问题上,远好于div

  希望有高人能解决我这个问题。

  在这个问题上,我希望达到的效果就是,当中间列超宽的时候,能把右列挤到屏幕以外去,但仍然保持水平的布局关系,不要错开。

  问题3:高度的自适应

  还是三列(或两列)的布局。在不考虑有什么超大的图片的情况下。是比较容易实现宽度自适应的布局的。但是如果左/中/右的背景色不一样怎么办?如何实现看起来各栏的高度是一样的?当然,有解决方法,我会,但是,如果不是背景色,是垂直平铺的背景图片怎么办?如何实现三栏(或两栏)的背景高度看起来是一致的?

  请别讨论在后台怎么处理的问题了,我想知道的就是,这几个问题,在不用表格布局的前提下,用Div+CSS能不能实现,而且至少要保证IE+FF的兼容性(可以是不同的CSS文件)。

展开更多 50%)
分享

猜你喜欢

小经验大作用 用CSS解决布局难题

Web开发
小经验大作用 用CSS解决布局难题

用VB开发CAI软件的小经验

编程语言 网络编程
用VB开发CAI软件的小经验

s8lol主宰符文怎么配

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

HTML编写小经验

Html CSS布局 Div+CSS XHTML
HTML编写小经验

插花保鲜小经验

生活常识
插花保鲜小经验

lol偷钱流符文搭配推荐

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

用函数公式解决筛选难题

办公软件
用函数公式解决筛选难题

食物丰胸的小经验

丰胸
食物丰胸的小经验

lolAD刺客新符文搭配推荐

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

介绍几个不常用的HTML标签

介绍几个不常用的HTML标签

QQ空间人气精灵如何使用

QQ空间人气精灵如何使用
下拉加载更多内容 ↓