Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Два блока, фиксированный и резиновый

Автор: nepster 3.10.2013, 13:23

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

Есть блок, в нем два блока. Картинка (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/>
                            123456@mail.ru
                        </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;}

Автор: s1lver 9.10.2013, 09:02

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