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/

我建议为 and 再添加一个.heading包装.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 回答