CSS - плавающая проблема для адаптивного дизайна

Question

CSS - плавающая проблема для адаптивного дизайна

0

Как вы можете видеть в изображении проблемы выше, я хотел бы позиционировать изображение рядом с заголовком, но сохраняя структуру 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>

richwestcoast 19 сен. 2013, в 12:36

Источник

Теги:

html

css

position

responsive-design

4 ответа

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>

Arun Bertil 19 сен. 2013, в 07:29

0

Спасибо за ваш ответ :)
richwestcoast 19 сен. 2013, в 13:32
0

удовольствие.....:)
Arun Bertil 20 сен. 2013, в 05:09

0

Я думаю, что это ваш идеальный ответ http://jsfiddle.net/CadDC/14/. Если вы хотите, чтобы он был отзывчивым, вы должны указать ширину и все в %.

noob 19 сен. 2013, в 09:55

0

Спасибо за ваш ответ :)
richwestcoast 19 сен. 2013, в 13:31
0

Пожалуйста, отметьте это как ответ.
noob 19 сен. 2013, в 13:36
0

Я еще не видел, какой правильный ответ. в настоящее время не на моем ПК.
richwestcoast 19 сен. 2013, в 15:18

Показать ещё 1 комментарий

0

Не могли бы вы просто:

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

}

Ruddy 19 сен. 2013, в 08:21

0

Спасибо за ваш ответ :)
richwestcoast 19 сен. 2013, в 13:34

Ещё вопросы

Пожалуйста, отметьте это как ответ.
Я еще не видел, какой правильный ответ. в настоящее время не на моем ПК.

Alexandra · Accepted Answer · 2013-09-19T11-58-00.000Z

Посмотрите на эту скрипку: http://jsfiddle.net/caprella/7kbVX/

Я предлагаю добавить еще одну оболочку .heading для .headlineText и .subText. Это даст нам возможность переместить весь заголовок. Но эта .heading сталь нуждается в фиксированной ширине :(

Мне понравилась эта идея, потому что она была ближе всего к тому, что я нашел, что сработало.