2
我有以下代碼：寬度可變，並與背景圖像標題飄來圖像
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.article {width:600px;}
.image_container {float:left;margin-right:10px;}
h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
h1 span {display:block;padding:0 10px;background:url(right.png) no-repeat top right;}
</style>
</head>
<body>
<div class="article">
<div class="image_container">
<img src="test.jpg" alt="test_img" />
</div>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</body>
</html>
你可以看看這裏的演示：http://easwee.net/floated_img_article/
問題： 圖像可以有2個不同的寬度（3：2比率 - 水平或垂直）。如您所見，該標題具有背景圖像，該圖像位於浮動圖像的後面。
是否有css解決方案使背景圖像開始標題文本開始的地方 - 以便它不會被浮動圖像重疊？左圓角需要可見。
P.S .:你也可以指點我的JavaScript解決方案，但我更願意用css解決這個問題。
我真的不知道你在問什麼。也許你可以通過「使標題文本開始的地方開始背景圖像」來創建你的意思的模型？ – Robusto 2010-03-16 16:39:21
您是否能夠在顯示頁面之前檢測到頁面上的圖像大小？ – Brant 2010-03-16 18:25:49
已經有一個連接到問題的演示鏈接 - 問題可以在那裏看到。我設法通過應用overflow：隱藏到h1來正確地創建標題背景圖像位置。然而，另一個竅門是段落仍然計算邊界後面的填充和邊距。如果您添加了overflow：隱藏到p元素，則它們將在圖像下方被清除，這會留下空白區域，直到p標記結束。 – easwee 2010-03-17 09:07:39