具有可变宽度浮动图像和背景图像的标题

StackOverflow https://stackoverflow.com/questions/2456137

题

我有以下代码：

<!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来解决这个问题。

有帮助吗？

解决方案

如果你能够确定哪个图像比（3：2对2：3）。吐出的页面之前，可以将类指定给H1，然后用CSS边距处理它

<!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;}
        h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
        h1.wide{margin-left:260px}
        h1.narrow{margin-left:385px}
        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 class='wide'><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>

然后，只需<h1 class='wide'>和<h1 class='narrow'>之间切换

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top