Home > Article > Web Front-end > 【请教】如何实现横向布局时图片A居中宽度固定，左右两侧由不同的图片B、C填充为背景_html/css_WEB-ITnose
【请教】如何实现横向布局时图片A居中宽度固定，左右两侧由不同的图片B、C填充为背景_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:401297browse
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：twitter点赞动画详解_html/css_WEB-ITnoseNext article：CSS 最核心的四个概念_html/css_WEB-ITnose