Подтвердить что ты не робот

3 колонки, средний с гибкой шириной

Я хотел бы иметь макет, состоящий из трех смежных div. Боковые разделители имеют статическую ширину (она может меняться через javascript), а центр div заполняет оставшуюся область. Когда изменяется первый размер div, он влияет только на центральный. Он похож на таблицу (с динамическим рендерингом), состоящую из трех столбцов.

Хорошо, но где проблема. Проблема в том, что если я поместил float-left div в первый столбец и разделил div во втором и третьем, блокировки divs ведут себя странным образом. Они отображаются в их столбце ниже плавающего div из первого столбца.

Пример. В первом и втором столбцах у меня есть плавающий div и блок div в третьем столбце. Блок div смещается вниз по высоте плавающих div. Div в центральном столбце не сдвигается в его позиции y только в том случае, если у него есть свойство left left left.

Я хотел бы, чтобы каждый из трех разделяющих divs был независимым друг от друга. Я понятия не имею, почему элементы в третьем столбце плавают div в первых двух столбцах (с свойством float).

CODE:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

и результат: результат

Как это исправить. Как сделать все макеты div (столбцы) независимыми друг от друга. Любые идеи?

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете сделать это, плавая col1 и col3 влево и вправо, с фиксированной шириной.

Затем добавьте левое и правое поле в col2, равное ширине столбцов col1 и col3.

Это дает вам три столбца; col1 и col3 с фиксированной шириной и col2, заполняющими доступную ширину:

col2's content box in blue, and its margins in yellow
(поле содержимого col2 в синем, а его поля - желтым)

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

Попробуйте здесь: http://jsfiddle.net/22YBU/

BTW, если вам нужно отобразить: table, display: table-row и display: table-cell, используйте таблицу; -)