Сетка yui-css: как настроить сетку 1/4 - 2/4 - 1/4?
Я пытался заставить систему координат yui-css сделать сетку из трех столбцов, где первая слева (слева) использует 1/4 пространства, вторая (средняя) использует 2/4 пространства, а третья (справа)) использует 1/4 пространства.
Что-то вроде этого:
| header |
-------- ------------------------
| left | middle | right |
--------------------------------
| footer |
Любой вклад будет высоко ценится.
ОБНОВЛЕНИЕ: Судя по ответам / комментариям, я понимаю, что нужна дополнительная информация.
- Сайт исправлен с (750px - #doc в YUI).
- На самом деле я не заинтересован ни в каких решениях YUI (в любом случае, спасибо), так как я хотел бы начать использовать YUI-CSS в качестве базовой платформы, поэтому этот проект, который я делаю, является тестом, чтобы увидеть, отвечает ли он моим потребностям. Мне нравится тот факт, что он работает одинаково в разных браузерах.
3 ответа
Использовать решение yui довольно сложно:), но ниже приведено ваше решение для разметки столбцов 1/4, 2/4, 1/4
<body>
<div id="doc4" class="yui-t5">
<div id="hd">
</div> <!-- header -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gd">
<div class="yui-u first">
Left Column
</div> <!-- yui-u first -->
<div class="yui-u">
Middle Column
</div> <!-- yui-u -->
</div> <!-- yui-gd -->
</div> <!-- yui-b -->
</div> <!-- yui-main -->
<div class="yui-b">
Right Column
</div> <!-- yui-b -->
</div> <!-- body -->
</div> <!-- doc4 -->
</body>
Я использовал сетку yui для фиксированных форматов, но для макетов жидкостей с изменяемым размером я предпочитаю это решение. Похоже, вы хотите использовать проценты, а не заданное количество пикселей. Есть ли причина, по которой вы используете для этого сетку yui?
Используя общий CSS/(X)HTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css" media="all">
#wrapper {width: 100%; position: relative; }
#header {width: 100%;text-align: center; }
#left-col {width: 24%; display: inline-block;}
#main-col {width: 48%; margin: 0 1%; display: inline-block;}
#right-col {width: 24%; display: inline-block;}
#footer {width: 100%; clear: both; text-align: center; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>...header-content...</h1>
</div>
<div id="left-col">
...left-col content...
</div>
<div id="main-col">
...main-col content...
</div>
<div id="right-col">
...right-col content...
</div>
<div id="footer">
...footer content...
</div>
</div>
</body>
</html>
<div id="wrapper">
<div id="header">
...content...
</div>
<div id="left-col">
...content...
</div>
<div id="main-col">
...content...
</div>
<div id="right-col">
...content...
</div>
</div>
Это работает, но это не особенно красиво, и вам все еще придется иметь дело с высотой и местоположением колонки самостоятельно.