Создание трехколоночного макета с фиксированными боковыми панелями с использованием yui-grid

Question

Я пытался сделать это без особого успеха.

Как я могу, используя yui-grid, сделать шаблон, похожий на yui-t1 (с боковой панелью в 160 пикселей слева), но с боковой панелью справа такой же ширины?

Центральный столб должен быть жидким...

Answer 1

Вы могли бы попробовать этот жидкий макет вместо этого?

Answer 2

Вы можете адаптировать и расширить этот пример. Вот HTML-код для 200px фиксированного / жидкого содержимого / предустановленного столбца:

<div id="bd">
    <div id="yui-main">
        <div class="yui-b yui-b1">
            <div class="yui-u-main">
                <div class="yui-u">
                    <p>Main column: fluid width</p>
                </div>
            </div>
            <div class="yui-u">
                <p>Left column: 200px fixed</b>
            </div>
        </div>
    </div>
    <div class="yui-b">
        <p>Third column: fixed width, follows template preset.</p>
    </div>
</div>

CSS прост как:

.yui-b1 .yui-u-main {
    float: left;
    width: 100%;
}
.yui-b1 .yui-u {
    float: left;
    /* Width of left column */
    width: 200px;
    margin-left: -100%;
}
.yui-b1 .yui-u-main .yui-u {
    float: none;
    width: auto;
    /* Width of left column + 13px margin (default YUI margin) */
    margin-left: 213px;
}

Answer 3

Вы выбрали ответ Мэтью, но он не ответил на ваш вопрос. Хотя он, возможно, решил вашу проблему, кто-то, читающий этот вопрос в будущем, все же может захотеть узнать ответ. Подобные вещи, как мне кажется, отговаривают некоторых давать или разрабатывать ответ и заставляют кого-то повторять этот вопрос.

Answer 4

Согласно этой странице, правая боковая панель шириной 180px имеет класс по умолчанию yui-t4. Я предполагаю, что вы можете перейти в CSS и изменить значение этого пикселя на 160.

Answer 5

Пытались ли вы использовать макет сетки YUI http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html

но затем добавив дополнительный класс на 2-й юи-и называется .main или класс .last на 3-й ю-у.

Вы можете добавить ниже стиль перезаписи

.yui-gb .yui-u {
width: 19%;
}

.yui-gb .main {
  width: 59%;
}

чтобы получить 3 col с шириной 19/59/19

Что тебе пригодится?