conception Web à trois colonnes à côtés variables

StackOverflow https://stackoverflow.com/questions/73086

  •  09-06-2019
  •  | 
  •  

Question

J'ai essayé de trouver un moyen de créer une conception Web à 3 colonnes dans laquelle la colonne centrale a une largeur constante et est toujours centrée. Les colonnes à gauche et à droite sont variables. Ceci est trivial dans les tableaux, mais pas correct sémantiquement. Je n'ai pas réussi à le faire fonctionner correctement dans tous les navigateurs actuels. Des conseils à ce sujet?

Était-ce utile?

La solution

Utilisez cette technique et spécifiez simplement une largeur fixe pour le centre. colonne.

Autres conseils

Découvrez ceci: http://www.glish.com/css/2.asp

Et remplacez la largeur: xx% pour #maincenter par une valeur fixe. Semble fonctionner lorsque je le change avec Firebug, ça vaut le coup? 

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Je pense que vous devez commencer par définir les largeurs initiales (fixes) des deux colonnes de la barre latérale, puis, lors du chargement de la page, utilisez javascript pour obtenir la largeur de la fenêtre et calculer la nouvelle largeur des barres latérales.

sidebar width = (largeur de la fenêtre - largeur de la colonne centrale) / 2

Vous pouvez ensuite réappliquer le javascript si la fenêtre est redimensionnée.

Cet article sur A List Apart propose une solution qui se traduit par une mise en page à 3 colonnes qui:

  • avoir un centre de fluide avec des barres latérales de largeur fixe,

  • permet à la colonne centrale de figurer en premier dans la source,

  • permet à n'importe quelle colonne d'être la plus haute,

  • n'exige qu'un seul div supplémentaire du balisage et

  • nécessite des CSS très simples, avec un minimum de correctifs.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top