Динамика динамика трех столбцов DIV; left = fixed, center = жидкость, right = жидкость

Лучшее решение, которое я нашел до сих пор:

http://jsfiddle.net/kizu/UUzE9/

Но это было не совсем так. Видите ли, у меня три столбца; два из которых необходимо избегать явно определенного размера. Ну, второй нужно иметь размер; но не совсем.

Позвольте мне уточнить, установив условия, которые я пытался встретить.

  • Все три столбца имеют фиксированную высоту: 65 пикселей, если быть точным.
  • Первая ширина столбца равна 285px.
  • Центральный столбец не имеет определенного размера; он просто занимает все свободное место.
  • Правый столбец будет определять размер содержимого. Размер явно не задан, он просто изменяет размер в зависимости от содержимого, оставляя центральную колонку занятой все пространство.
  • Здесь нет пробелов выше, ниже и между столбцами.

Конечный результат примерно будет выглядеть примерно так:

   Logo     |            Player          |    Name     
-----------------------------------------------------

Для таблиц я бы просто сделал это:

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

Результат приведенного выше кода таблицы: http://jsfiddle.net/zMNYb/

Но я пытаюсь отойти от использования таблиц и использовать макет DIV. Любые идеи?

Ответы

Ответ 1

Вы можете сделать это, используя float:left для первого столбца, float:right для последнего столбца и сделать центральный столбец float:none

Обновлено демо: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

ПРИМЕЧАНИЕ. Необходимо поместить правый столбец перед центральным столбцом в HTML (см. выше, col3 идет до col2 в HTML), чтобы убедиться, что, когда браузер отображает центральный столбец, он знает, как правильно рисовать вокруг существующих плавающих элементов.

Обновлен CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Обновлено демо: http://jsfiddle.net/ew65G/1/

Ответ 2

Это также может быть достигнуто с помощью концепции вложенных div. Все, что вам нужно сделать, это разделить раздел div, который вы хотите, на 3 столбца, как показано ниже.

<div id="main">
    <div id="column-1"></div>
    <div id="column-2">
        <div id="column-2-1"></div>
        <div id="column-2-2"></div>
    </div>
</div>

Пройдите Как создать 3-х столбчатый макет с помощью css div, чтобы узнать больше об этом.

Ответ 3

<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

Вы можете отрегулировать ширину% по мере необходимости.

Ответ 4

Вам также нужно будет поставить "display: inline;" поскольку div обычно отображается в блочной форме. Без встроенного он будет отображаться как три строки, а не три столбца.