Плавающее изображение с переменной шириной и заголовком с фоновым изображением

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 margins.

<!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