web-dev-qa-db-fra.com

Trois colonnes colonne dynamique de mise en page; gauche = fixe, centre = fluide, droite = fluide

La meilleure solution que j'ai trouvée jusqu'à présent était:

http://jsfiddle.net/kizu/UUzE9/

Mais ce n'était pas tout à fait ça. Vous voyez, j'ai trois colonnes; dont deux doivent éviter d’être explicitement dimensionnés. Eh bien, le second doit être dimensionné; mais pas tout à fait. 

Permettez-moi de clarifier en établissant les conditions que j'ai essayé de satisfaire. 

  • Les trois colonnes ont une hauteur fixe: 65 px, pour être précis. 
  • La largeur de la première colonne est définie sur 285 px. 
  • La colonne centrale n'a pas de taille définie; cela prend simplement tout l'espace qui reste.
  • La colonne de droite se dimensionnera elle-même en fonction du contenu contenu. Il n'y a pas de taille explicitement définie, elle est simplement redimensionnée en fonction du contenu, laissant la colonne centrale occuper l'espace restant. 
  • Il n'y a pas d'espaces en haut, en bas et entre chaque colonne. 

Le résultat final ressemblerait à peu près à ceci:

 Logo | Joueur | Prénom     
---------------------------------------------- -------

Pour les tables, j'aurais simplement fait ceci:

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

Résultat du code de table ci-dessus: http://jsfiddle.net/zMNYb/

Mais j'essaie d'éviter l'utilisation de tableaux et d'une mise en page basée sur DIV. Des idées?

csslayouthtml
19
Don Cullen

Vous pouvez le faire en utilisant float:left pour la première colonne, float:right pour la dernière colonne et en faisant la colonne centrale float:none

Mise à jour de la démo: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

NOTE: Il est nécessaire de placer votre colonne de droite avant votre colonne centrale en HTML (voir ci-dessus, col3 vient avant col2 dans le HTML) pour vous assurer que lorsque le navigateur affichera la colonne centrale, il restituer correctement autour des éléments flottants existants.

CSS mis à jour

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Démo mise à jour: http://jsfiddle.net/ew65G/1/

27
techfoobar

Ceci peut également être réalisé par le concept div imbriqué. Tout ce que vous avez à faire est de diviser la section div que vous voulez en 3 colonnes comme suit

<div id="main">
    <div id="column-1"></div>
    <div id="column-2">
        <div id="column-2-1"></div>
        <div id="column-2-2"></div>
    </div>
</div>

Veuillez passer par Comment créer une disposition en 3 colonnes en utilisant css div pour en savoir plus à ce sujet.

0
Manoj Kumar
<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

Vous pouvez ajuster la largeur% si nécessaire.

0
Charles Matanda

Vous aurez également besoin de mettre "display: inline;" en tant que div affiche normalement sous forme de bloc. Sans l'inline, il apparaîtra comme trois lignes et non pas trois colonnes. 

0
Harry Fairbanks