Помогите сверстать таблицу/слои с тремя колонками разного размера

Тема в разделе "Верстка", создана пользователем UDAV, 5 авг 2014.

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

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    HTML:
    
    <table style="width: 100%;height: 92px;">
        <tr>
            <td style="background: #ff7000;">1</td>
            <td style="background: pink; max-width: 1200px; min-width: 800px;">2</td>
            <td style="background: #f00;">3</td>
        </tr>
    </table>
    
    Помогите сверстать на слоях или сделать таблицей чтоб работали стили.
    Суть такая, на 100% тянется таблица/слой, средняя колонка должна иметь максимальный и минимальный размеры, боковые колонки должны дотягиваться до края экрана.
     
  2. e80

    e80 Постоялец

    Регистр.:
    16 июл 2012
    Сообщения:
    58
    Симпатии:
    15
    из того что пришло первое в голову
    Код:
    <table style="width: 100%;height: 92px;">
        <tr>
            <td width="50%" style="background: #ff7000;">1</td>
            <td style="background: pink; max-width: 1200px; min-width: 800px;">2</td>
            <td width="50%" style="background: #f00;">3</td>
        </tr>
    </table>
     
  3. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
  4. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    На таблицах такое не сделать.
    Как вариант на дивах:
    Код:
    <div style="width:100%; white-space: nowrap">
        <div style="display: inline-block; background: #ff7000; calc((100% - 800px)/2)">1</div>
        <div style="display: inline-block; background: pink; width: 50%; max-width: 1200px; min-width: 800px;">2</div>
        <div style="display: inline-block; background: #f00; calc((100% - 800px)/2)">3</div>
    </div>
    При изменении размера и изначально с помощью js выставляем текущий width среднего блока вместо 800px в стилях боковых блоков.
     
  5. Platton

    Platton Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    77
    Симпатии:
    18
    Как это так средний блок не должен менять размеры если задано max-width: 1200px; min-width: 800px;?
    Чтобы он не менял размеры он должен быть фикс - ширины
     
  6. maxkazartsev

    maxkazartsev Писатель

    Регистр.:
    5 авг 2014
    Сообщения:
    8
    Симпатии:
    5
    Можно реализовать на бутстрап - http://getbootstrap.com/css/#grid
    <div class="container-fluid">
    <div class="row">
    <div class="col-xs-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-xs-4">.col-md-4</div>
    </div></div>

    У себя проверил, работает. Для дива col-md-4 можно задать размеры или поменять на col-lg-4, увеличится минимальный размер дива автоматом.
     
    Последнее редактирование: 6 авг 2014
  7. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Мне нужно чтобы он менял размеры, я же написал. В твоем примере он не меняет.

    Girt, а без js можно как-то?

    maxkazartsev, ради одной таблички фреймворк как-то не хочется подключать -) К тому же в твоем примере все ячейки будут заданы в процентах, а мне нужно чтобы средняя была размерами ОТ и ДО.
     
    Последнее редактирование: 6 авг 2014
    mff4 нравится это.
  8. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    Вот набросок решения без js:
    Код:
    <div class="flex-container">
            <div class="flex-block left">1</div>
            <div class="flex-block center">2</div>
            <div class="flex-block right">3</div>
    </div>
    <style>
    div.flex-container {
        width: 100%;
        display: flex;
    }
    div.flex-block {
        flex-grow: 0;
    }
    div.flex-block.left, div.flex-block.right {
        flex-basis: 25%;
        flex-grow: 1;
    }
    div.flex-block.center {
        background: pink;
        max-width: 1200px;
        min-width: 800px;
        flex-basis: 50%;
    }
    div.flex-block.left {
        background: #ff7000;
    }
    div.flex-block.right {
        background: #f00;
    }
    </style>
    Осталось установить оптимальные значения flex-basis.
     
    Последнее редактирование: 6 авг 2014
    UDAV нравится это.
  9. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Girt, интересное решение, а как с кросбраузерностью? У меня в хроме почему-то средняя колонка занимает минимальное значение.
    flex-basis надо как регулировать? Т.е. там не 50% изначально должно стоять?
     
  10. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    У тебя ширина экрана какая? Если меньше 1600px, то всё правильно, 50% - это меньше 800px (используется min-width).
    Грубо говоря, flex-basis - это ширина элемента.
    Т.к. у центрального блока flex-basis: 50%; и ширина экрана меньше 1600px, то при растяжении первым делом будут увеличиваться боковые блоки. Вот здесь и нужно выбрать оптимальное значение. Соответственно сумма должна быть 100%.
    По поводу кроссбраузерности, основная линейка браузеров (Firefox, Opera, IE, Chrome) поддерживает.
     
    Последнее редактирование: 7 авг 2014
    UDAV нравится это.