0

問題: http://i.snag.gy/TYvi4.jpg

フィドル: http://jsfiddle.net/CadDC/7/

上の問題の画像でわかるように、レスポンシブ レイアウトの html の構造を維持しながら、画像をタイトルの横に配置したいと考えています。

<div class="listingWrapper clearfix">
<div class="headlineText">FLOAT: RIGHT</div>
<div class="subText">FLOAT: RIGHT</div>
<div class="logo">FLOAT: LEFT (ALONGSIDE HEADLINE)</div>
<div class="introduction">FLOAT: RIGHT</div>

4

4 に答える 4

2

このフィドルを見てください: http://jsfiddle.net/caprella/7kbVX/

とのラッパー.headingをもう 1 つ追加することを提案します。ヘッダー全体を移動する機会が得られます。しかし、その鋼は固定幅が必要です:(.headlineText.subText.heading

于 2013-09-19T13:53:52.270 に答える
1

Js フィドルを確認する

http://jsfiddle.net/CadDC/9/

<div class="listingWrapper clearfix">

    <div class="logo">
        <img class="listingImage" src="http://media-cdn.tripadvisor.com/media/photo-s/02/d0/d7/ed/hotel-du-vin-york.jpg" />
    </div>



    <div class="headlineText"><h2>Hotel name</h2></div>
    <div class="subText">Mars - 0.7 miles from Mars City Centre</div>
        <div class="introduction">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost       
    </div>        
</div>
于 2013-09-19T10:26:07.163 に答える
0

あなたはただカント：

.listingImage{
max-width: 190px;
float: left;

}

于 2013-09-19T10:27:29.337 に答える
0

これはあなたの完璧な答えだと思いますhttp://jsfiddle.net/CadDC/14/。レスポンシブにしたい場合は、 width と all in を指定する必要があります%。

于 2013-09-19T12:13:48.377 に答える