grille Yui-css: comment obtenir un 1/4 - 2/4 - 1/4 grille mis en place?
Question
J'ai essayé d'obtenir le système de grille Yui-css pour faire une grille à trois colonnes, la première sur (à gauche) utilise un quart de l'espace, le second (au milieu) utilise 2/4 de l'espace et la troisième (à droite) utilise un quart de l'espace.
Quelque chose comme ceci:
| header |
-------- ------------------------
| left | middle | right |
--------------------------------
| footer |
Toute entrée sera très appréciée.
MISE À JOUR:. A en juger par les réponses / commentaires, je me rends compte encore plus d'information est nécessaire
- Le site a un fixe avec (750px - #doc à YUI).
- Je ne suis pas vraiment intéressé par aucune des solutions de YUI (merci de toute façon), puisque j'aimerais commencer à utiliser YUI-CSS en tant que cadre de base, donc ce projet, je suis en train de faire est un test pour voir si elle répond à mes besoins. J'aime le fait que cela fonctionne de la même façon dans les différents navigateurs.
La solution
en utilisant la solution de Yui est assez délicat :) mais au-dessous est ur solution à 1/4, 2/4, 1/4 disposition des colonnes
<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>
Autres conseils
Je l'ai utilisé la grille de Yui pour les formats fixes, mais pour mises en page liquides redimensionnables Je préfère cette solution . On dirait que vous voulez utiliser des pourcentages plutôt que d'un certain nombre de pixels. Y at-il une raison que vous utilisez la grille de Yui pour cela?
Utilisation générale 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>
Cela fonctionne, mais il est pas particulièrement jolie, et vous êtes toujours à gauche pour faire face à la hauteur des colonnes et vous-même endroits.