Двухэтапная разметка с текущим левым и фиксированным правым столбцом

Я хочу создать макет с двумя столбцами, используя DIV, где правый столбец будет иметь фиксированную ширину 200 пикселей, а левый займет все оставшееся пространство.

Это довольно просто, если вы используете таблицы:

<table width="100%">
  <tr>
    <td>Column 1</td>
    <td width="200">Column 2 (always 200px)</td>
  </tr>
</table>

Но как насчет DIV? Можно ли это сделать? Если да, то как?

Ответы

Ответ 1

Следующие примеры упорядочены по источнику, т.е. столбец 1 появляется перед столбцом 2 в источнике HTML. Отображается ли столбец слева или справа с помощью CSS:

Фиксированное право

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Ответ 2

Здесь решение (и у него есть некоторые причуды, но дайте мне знать, заметите ли вы их и что они обеспокоены):

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>

Ответ 3

CSS Solutuion

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

Проверьте рабочий пример http://jsfiddle.net/NP4vb/3/

jQuery Solution

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

Проверьте рабочий пример http://jsfiddle.net/NP4vb/

Ответ 4

CSS

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

HTML:

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

Вышеприведенное должно работать, вы можете поместить этот код в оболочку, если хотите, чтобы он дал ему ширину и центрировал его, overflow:hidden в столбце без ширины - это ключ к тому, чтобы он содержал его вертикально, как в не обернуть вокруг боковых столбцов (может быть слева или справа)

IE6 может потребоваться zoom:1, установленный в div #content, если вам нужна поддержка

Ответ 5

Недавно я показал этот сайт для жидких макетов с использованием CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Взгляните на демонстрационные страницы в ссылках ниже).

Теперь автор предлагает пример для макетов фиксированной ширины. Проверять, выписываться; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.

Это дает следующий пример (ы) http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (для двух раскладок столбцов, как вы, после того, как я думаю)

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (для трех макетов столбцов).

Извините за так много ссылок на сайт ребята, но я думаю, что это AWESOME ресурс.

Ответ 6

Я думаю, что это простой ответ, это будет разбивать дочерние devs на 50% каждый на основе родительской ширины.

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>

Ответ 7

#wrapper {
  margin-right: 50%;
}
#content {
  float: left;
  width: 50%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>