Как расширить колонку CSS до доступного пространства? - PullRequest
0 голосов
/ 09 октября 2011

Есть способ сделать это, используя абсолютное позиционирование.

У меня есть две колонки. Левый столбец имеет фиксированную ширину 200px плюс левое поле 30px. Правый столбец содержит содержимое и должен расширяться, чтобы соответствовать доступному пространству.

Я сделал это, разместив каждый столбец, используя абсолютные позиции, и растянув правый столбец, используя право: 0px, чтобы он коснулся правого края. Есть ли способ добиться того же эффекта при использовании float: left для определения столбцов? Пока что столбец только расширяется, чтобы соответствовать ширине его содержимого.

Бонусные баллы, если я смогу сделать это с помощью Compass / Sass (но я не хочу полагаться на фреймворки, такие как Blueprint, поскольку макет довольно тривиален).

1 Ответ

3 голосов
/ 09 октября 2011

@ Art; Вы должны написать так:

HTML:

<div class="left">left fix width</div>
<div class="right">right no fix width</div>

CSS:

.left{float:left;width:200px;margin-right:30px}
.right{overflow:hidden}

проверить скрипку http://jsfiddle.net/sandeep/4RN2j/

...