web-dev-qa-db-fra.com

Mise en page CSS - largeur dynamique DIV

J'ai un problème de mise en page assez commun que j'ai toujours utilisé avec un tableau pour résoudre, mais je voudrais quelques conseils pour le faire avec CSS. J'ai 3 images qui composent un «conteneur». Les images de gauche et de droite ne sont généralement affichées qu'à l'aide de balises, et l'image centrale est affichée sous la forme d'une "image d'arrière-plan" avec mon contenu dessus, de sorte que le contenu semble être dans le conteneur./utilisé cela un million de fois:

<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>

La bonne chose à ce sujet est que la largeur de la table est toujours la largeur du navigateur (ou parent) et la colonne du milieu où le contenu est dynamiquement redimensionne pour occuper l'espace restant entre les images gauche/droite.

Ce que je veux, c'est recréer cela en utilisant CSS, avec le moins d’informations codées en dur que possible. Donc, quelque chose comme ça:

<div style="float:left; width:100%">
  <div style="width: 50px;float:left;"><img src="myleftimage" /></div>
  <div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
  <div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>

Cela fonctionne très bien accepter pour le div moyen-comment puis-je définir la largeur? À l'heure actuelle, je peux le coder en dur pour être, disons, à 92%, etc. Mais ce que je veux, c'est qu'il remplisse automatiquement l'espace. Peut-on le faire en utilisant uniquement CSS?

csswidth
17
Todd Davis

essayer

<div style="width:100%;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>

ou

<div style="width:100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>
21
wow

Cela fera ce que vous voulez. Des côtés fixes avec une largeur de 50 pixels et le contenu remplit la zone restante.

<div style="width:100%;">
    <div style="width: 50px; float: left;">Left Side</div>
    <div style="width: 50px; float: right;">Right Side</div>
    <div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
9
Aziz

Ou, si vous connaissez la largeur des deux images "latérales" et que vous ne voulez pas vous occuper des flottants:

<div class="container">
    <div class="left-panel"><img src="myleftimage" /></div>
    <div class="center-panel">Content goes here...</div>
    <div class="right-panel"><img src="myrightimage" /></div>
</div>

CSS:

.container {
    position:relative;
    padding-left:50px;
    padding-right:50px;
}

.container .left-panel {
    width: 50px;
    position:absolute;
    left:0px;
    top:0px;
}

.container .right-panel {
    width: 50px;
    position:absolute;
    right:0px;
    top:0px;
}

.container .center-panel {
    background: url('mymiddleimage');
}

Remarques:

Position: relative sur le div parent est utilisé pour faire en sorte que les enfants se positionnent de manière absolue par rapport à ce noeud.

5
AaronSieb

faire une largeur dynamique avec le support des appareils mobiles

http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html

0
alex