[問題] 網頁排版問題
目的：
一段文字與文字，中間參雜圖片，
圖片有並排的，也有二張疊在一起組成的。（翻譯文字一張圖，背景一張圖）
問題：
詳細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
推
06/14 13:11, , 1F
06/14 13:11, 1F