作者Elfiend (小孩)
看板Web_Design
标题[问题] 网页排版问题
时间Thu Jun 13 20:56:54 2013
目的：
一段文字与文字，中间参杂图片，
图片有并排的，也有二张叠在一起组成的。（翻译文字一张图，背景一张图）
问题：
详细CODE如下，产生的方式是从excel里的文字，
经过php转译後，变成html格式。
ex: EXCEL里： 文字@图片1@@图片2背景@@图片2前景@文字
转成：文字<img/><img/><img/>文字
因为上叙原因，所以做了下列设定。
为了完成二张图叠在一起，使用了absolute。
然後恶梦就开始了因为absolute的关系，
高度就不会算进去，会造成图片挡住第二段文字。
所以又增加了line-height来设定高度。
然而每张图高度不同，设太高会造成一堆空白，太低又会挡住文字。
好像进入死循环了？
叠图虽然可以用relative，可是第二张图的位置还是要算，
除了relative的方式，还有其他的解决方法吗？
HTML:
┌───────────────────────────┐
│文字 │
│<span class="Container SizeL"> │
│ <img class="Background SizeL" src="xxx│png/"> │
│</span> │
│文字 │
└───────────────────────────┘
CSS:
.Container{
text-align: center;
display:block;
}
.Background{
position:absolute;
z-index:1;
}
.Font{
position:absolute;
z-index:2;
}
span.SizeL{
width:700px;
line-height:auto;
height:auto;
}
img.SizeL{
width:700px;
line-height:auto;
height:auto;
}
--
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 60.251.136.103
1F：推 eight0:用负的margin试试 06/14 13:11