yui-css сетка: как получить сетку 1/4 - 2/4 - 1/4?

Я пытаюсь получить сетку 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 в качестве базовой структуры, поэтому этот проект, который я делаю, является тестом, чтобы узнать, соответствует ли он моим потребностям. Мне нравится, что он работает одинаково в разных браузерах.

источник

2009-07-02 Egil Hansen

ли вам это нужно, чтобы оставаться как вариант рамочного YUI, или вы согласитесь с неструктурными ответами, которые достигают того же? –

с помощью 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>

источник

2009-07-11 21:36:11 gkrdvl

Мой бог уродлив, но спасибо за ответ :) –

Я использовал сетку yui для фиксированных форматов, но для масштабируемых жидких макетов предпочитаю this solution. Похоже, вы хотите использовать проценты, а не определенное количество пикселей. Есть ли причина, по которой вы используете сетку yui?

источник

2009-07-02 14:07:23 Nosredna

Используя общий 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>

Это работает, но это не особенно красиво, и вы все еще остается иметь дело с высоты столбцов и места самостоятельно.

источник

2009-07-02 14:22:37

yui-css сетка: как получить сетку 1/4 - 2/4 - 1/4?

ответ

Смежные вопросы