【请教】如何实现横向布局时图片A居中宽度固定,左右两侧由不同的图片B、C填充为背景_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:31:40
原創
1335 人瀏覽過


1、横向布局,分三列,左、中、右

2、中间列
图片A作为背景(宽度960)。
内容都放置在这里面。

3、左列由图片B填充为背景
宽度为1,高度若干,横向拉伸

4、右列由图片C填充为背景
宽度为1,高度若干,横向拉伸

以上4点是由于图片A的左侧边缘和右侧边缘不一样,所以两侧需要有不同的2张图片向左右延伸出去(填满屏幕),以便用户在不同分辨率下可以比较舒坦。


回复讨论(解决方案)

=。=
一天了还么人回复吗……

那就三个图片分别放在一个div里面,外包一个div,中间的宽度为图片的宽度,左右两边自适应auto

那就三个图片分别放在一个div里面,外包一个div,中间的宽度为图片的宽度,左右两边自适应auto


看了几遍……没太明白……

<!doctype html><html lang="en"><head>	<meta charset="UTF-8" />	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />	<title> 页面名称 </title><style type="text/css">#A {	position: absolute;	top: 0;	left: 50%;	margin-left: -480px;	width: 960px;	height: 1000px;	background: #FF9900;}#B {	position: absolute;	top: 0;	right: 50%;	margin-right: 480px;	width: 50%;	height: 1000px;	background: #CC66CC;}#C {	position: absolute;	top: 0;	left: 50%;	margin-left: 480px;	width: 50%;	height: 1000px;	background: #99FFFF;}</style></head><body><div id="A"></div><div id="B"></div><div id="C"></div></body></html>
登入後複製
登入後複製

<!doctype html><html lang="en"><head>	<meta charset="UTF-8" />	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />	<title> 页面名称 </title><style type="text/css">#A {	position: absolute;	top: 0;	left: 50%;	margin-left: -480px;	width: 960px;	height: 1000px;	background: #FF9900;}#B {	position: absolute;	top: 0;	right: 50%;	margin-right: 480px;	width: 50%;	height: 1000px;	background: #CC66CC;}#C {	position: absolute;	top: 0;	left: 50%;	margin-left: 480px;	width: 50%;	height: 1000px;	background: #99FFFF;}</style></head><body><div id="A"></div><div id="B"></div><div id="C"></div></body></html>
登入後複製
登入後複製




谢谢!正好是我需要的

重写了一下代码,如下
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




 页面名称 







M

L

R




來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板