Deux colonne div mise en page avec fluide gauche et fixe Colonne de droite
Je veux faire une mise en page à deux colonnes en utilisant DIVs, où la colonne de droite aura une largeur fixe de 200px et la gauche prendra tout l'espace qui reste.
C'est assez facile, si vous utilisez des tables:
<table width="100%">
<tr>
<td>Column 1</td>
<td width="200">Column 2 (always 200px)</td>
</tr>
</table>
Mais Que diriez-vous DIVs? Est-il possible d'accomplir cette? Si oui, comment?
7 réponses
Les exemples suivants sont classés par source, c'est-à-dire que la colonne 1 apparaît avant la colonne 2 dans la source HTML. Si une colonne apparaît à gauche ou à droite est contrôlée par CSS:
Droit Fixe
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>Fixe À Gauche
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>Une autre solution consiste à utiliser display: table-cell; ce qui entraîne des colonnes de hauteur égale.
Voici une solution (et elle a quelques bizarreries, mais faites-moi savoir si vous les remarquez et qu'elles sont préoccupantes):
<div>
<div style="width:200px;float:left;display:inline-block;">
Hello world
</div>
<div style="margin-left:200px;">
Hello world
</div>
</div>
CSS:
#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}
HTML:
<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>
Ce qui précède devrait fonctionner, vous pouvez mettre ce code dans wrapper si vous voulez lui donner de la largeur et le centrer aussi, overflow:hidden sur la colonne sans largeur est la clé pour le contenir, verticalement, comme dans ne pas enrouler autour des colonnes latérales (peut être gauche ou droite)
IE6 pourrait besoin zoom:1 Définir sur le # content div trop si vous avez besoin de son support
CSS Solutuion
#left{
float:right;
width:200px;
height:500px;
background:red;
}
#right{
margin-right: 200px;
height:500px;
background:blue;
}
Vérifier exemple de travail à http://jsfiddle.net/NP4vb/3/
Solution JQuery
var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);
Vérifier l'exemple de travail http://jsfiddle.net/NP4vb/
On m'a récemment montré ce site pour les mises en page liquides en utilisant CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (jetez un oeil aux pages de démonstration dans les liens ci-dessous).
L'auteur fournit maintenant un exemple pour les mises en page à Largeur fixe. Découvrez; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.
Cela fournit ce qui suit exemple(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (pour la mise en page de deux colonnes comme vous êtes après je pense)
Http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (pour la disposition de trois colonnes).
Désolé pour tant de liens vers ce site de gars, mais je pense que c'est une ressource impressionnante.
Je pense que c'est une réponse simple , cela divisera les développeurs enfants 50% chacun en fonction de la largeur parent.
<div style="width: 100%">
<div style="width: 50%; float: left; display: inline-block;">
Hello world
</div>
<div style="width: 50%; display: inline-block;">
Hello world
</div>
</div>
#wrapper {
margin-right: 50%;
}
#content {
float: left;
width: 50%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>