VPF::Два блока, фиксированный и резиновый

nepster

Дата 3.10.2013, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 26.4.2009

Репутация: нет
Всего: нет

Подскажите пожаоуйста как релизовать следующую вещь.

Есть блок, в нем два блока. Картинка (1 блок) и текст (2 блок).

Их нужно рассмоложить слева (float:left). И в зависимости от того, сколько текса во втором блоке, он должен всегда быть слева, а не сползать.

Прикладываю картинку.

1) вариант, текста не много, работает правильно
2) вариант, текста п обольше и блок едет
3) вариант, как должно быть

Код


            <div class="content_block">
                <h3>Правый блок 2</h3>
                <div class="support">
                    <span class="tel">&nbsp;</span>
                    <div class="text">
                        <p class="strong">
                            093 123 45 67<br/>
                            [email protected]
                        </p>
                        <p class="silver">
                            Текст текст текст текст текст текст текст текст
                        </p>
                    </div>
                </div>
            </div>

Код


  .support
  {
    width: 100%;
  }
  
  
  .support .tel
  {
    display: block;
    width: 142px;
    height: 90px;
    background: url(../images/site/tel.png) no-repeat 0px -25px;
    float: left; border: solid 1px red;
  }
  
  
  .support .text{float: left; border: solid 1px red; width: auto;}
  .support .text .strong{font-size: 15px; font-weight: bold;}

Это сообщение отредактировал(а) nepster - 3.10.2013, 13:26

Присоединённый файл ( Кол-во скачиваний: 16 )

1.jpg 71,41 Kb

s1lver

Дата 9.10.2013, 09:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Поздновато конечно, тут стоит использовать процентное соотношение. Тогда блок будет сжиматься, а не сползать.

--------------------

Я собрался жить вечно - пока все идет нормально!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »