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

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

1 голос
/ 25 мая 2009

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

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

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

Ответы [ 5 ]

1 голос
/ 25 августа 2009

Вы можете адаптировать и расширить этот пример. Вот 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;
}
1 голос
/ 26 мая 2009

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

0 голосов
/ 10 июля 2009

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

0 голосов
/ 26 мая 2009

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

, но затем добавление дополнительного класса ко второму yui-u с именем .main или класса .last к третьему yui-u.

Вы можете добавить следующий стиль перезаписи 

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

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

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

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

0 голосов
/ 25 мая 2009

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

...