div авто ширина

Тема в разделе "Верстка", создана пользователем droni4, 20 май 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Подскажите пожалуйста по коду

    div'ы должны быть разной ширины в зависимости от контента
    а они берут ширину от дива который шире всех
    Код:
    <div class="sob-full-opis-info">
            <div class="sob-full-data">[xfvalue_data]</div>
            <div class="sob-full-organizator">Hobbit Hall</div>
            <div class="sob-full-price">300 руб.</div>
        </div>
    
    Код:
    .sob-full-opis-info {
        float: right;
        min-width:0;
    }
    .sob-full-data {
        background: #f52929;
        padding: 10px;
        color: white;
        font-size:18px;
    }
    .sob-full-organizator {
        background: #022A6F;
        padding: 10px;
        color: white;
        font-size:18px;
    }
    .sob-full-price {
        background: #2F8BF0;
        padding: 10px;
        color: white;
        font-size:18px;
    }
    

    2014-05-20_130819.png

    в общем разобрался таким образом:
    Код:
    <div class="sob-full-opis-info">
      <div class="sob-full-data">[xfvalue_data]</div>
      <div class="sob-full-organizator">Hobbit Hall</div>
      <div class="sob-full-price">300 руб.</div>
    </div>
    
    Код:
    .sob-full-opis-info {
        float: right;
        text-align:right;
        margin-left:15px;
    }
    .sob-full-data {
        float:right;
        background: #f52929;
        padding: 10px;
        color: white;
        font-size:18px;
    }
    .sob-full-organizator {
        float:right;
        background: #022A6F;
        padding: 10px;
        color: white;
        font-size:18px;
    }
    .sob-full-price {
        background: #2F8BF0;
        padding: 10px;
        color: white;
        font-size:18px;
        float:right;
    }
    
    2014-05-20_133018.png
     
    Последнее редактирование модератором: 20 май 2014
  2. newbik

    newbik Создатель

    Регистр.:
    22 апр 2008
    Сообщения:
    14
    Симпатии:
    8
    можно еще через display:inline-block
     
  3. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    а можно более расширенный ответ для экономии времени, куда вставить?

    честно говоря пробовал через display:inline-block, но если носом ткнешь и все заработает, то низкий поклон тебе)
     
  4. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    А зачем ты в этом случае используешь блочные элементы?
    Почему не засунуть это в спан?
     
  5. vava1

    vava1 Постоялец

    Регистр.:
    21 апр 2013
    Сообщения:
    50
    Симпатии:
    3
    Кажется понял о чем он, но тут соль, т.е. есть обертка для этих элементов, его ширина должна быть не меньше той штуки. эти штуки в инлайн блок и выравнивание текста на право, + падинги = профит
    прим:
    HTML:
    div>span*3
    css:
    HTML:
    div {
    width: 180px; // ширина макс ! важно для того, что бы первый и второй спан не был в одну строку из-за инлайн позиций
    float: right
      span {
        padding: 4px 10px;
      }
    }
     
  6. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    блоки уехали в IE
    пациент над которым тружусь:


    решение еще не нашел что бы во всех браузерах включая IE были одинаковы
     
  7. vava1

    vava1 Постоялец

    Регистр.:
    21 апр 2013
    Сообщения:
    50
    Симпатии:
    3
    убери чертовые br,
    добавь к .sob-full-opis-info {width: 40%}
    у внутренних блоков убери флоат и добавь display: inline-block;
    проверить не могу, должно работать.
    p.s. Соль может быть в первых строчках контента.. он может наезжать... ну или туплю
     
    Последнее редактирование: 23 май 2014
    droni4 нравится это.
  8. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Все круто, спасибо, заработало =).
    Хром, IE - полет нормальный

    Низкий поклон вам :thenks: