Deux colonnes div d'une mise en page fluide gauche et fixe de la colonne de droite
Je veux faire une disposition en deux colonnes à l'aide de la Vrd, où la colonne de droite vont avoir une largeur fixe de 200px et la gauche prendrait tout l'espace qui est à gauche.
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-DIVs? Est-il possible d'accomplir cette? Si oui, comment?
- Réponse courte? Oui
Vous devez vous connecter pour publier un commentaire.
Les exemples suivants sont source commandé c'est à dire la colonne 1 s'affiche avant de la colonne 2 dans la source HTML. Si une colonne apparaît sur la gauche ou la droite est contrôlée par les CSS:
Fixe Droit
CSS:
HTML:
Gauche Fixe
CSS:
HTML:
Autre solution consiste à utiliser display: table-cell; qui résultats dans l'égalité de la hauteur des colonnes.
Voici une solution (et il a quelques bizarreries, mais laissez-moi savoir si vous remarquez qu'ils sont un sujet de préoccupation):
display: inline-block
ne devrait pas être nécessaire dans le code ci-dessus maisdisplay:inline
pourrait être utile pour IE6 et ci-dessous en raison de la double marge bug - si c'est rencontréCSS:
HTML:
Ci-dessus devrait fonctionner, vous pouvez placer ce code dans wrapper si vous voulez le donner en largeur et centre trop,
overflow:hidden
sur la colonne sans la largeur est la clé pour arriver à le contenir, à la verticale, comme dans pas enrouler autour des colonnes latérales (peut être à gauche ou à droite)IE6 pourrait besoin
zoom:1
ensemble sur le #div du contenu trop si vous en avez besoin du soutienCSS Solutuion
Vérifier exemple de travail à http://jsfiddle.net/NP4vb/3/
jQuery Solution
Vérifier exemple de travail http://jsfiddle.net/NP4vb/
J'ai été récemment montré ce site web pour des mises en page liquides à l'aide de CSS.
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Jetez un oeil à la démo pages dans les liens ci-dessous).
L'auteur fournit un exemple pour les mises en page à largeur fixe. Découvrez;
http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.
Ceci fournit l'exemple suivant(s),
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (pour la disposition en deux colonnes, comme vous êtes après, je pense)
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (pour les trois colonnes de mise en page).
Désolé pour tant de liens à ce gars de site, mais je pense que c'est une ressource IMPRESSIONNANTE.
Je pense que c'est une réponse simple , ce sera divisée enfant devs de 50% chacun en fonction de parent largeur.
CSS:
HTML: