떴으로 이미지 변수는 너비 및 제목과 배경 이미지

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