CSS: redimensionner div largeur selon les parents largeur

Ok, je suis fondamentalement la construction d'une mise en page fluide. Mon HTML est comme ceci:CSS: redimensionner div largeur selon les parents largeur

<div id="container"> 
    <div class="box" id="left">Left</div> 
    <div class="box" id="center">This text is long and can get longer</div> 
    <div class="box" id="right">Right</div> 
    <div class="clear"></div> 
</div>

Voici le css:

#container{ 
    width: 100%; 
} 
.box{ 
    float: left; 
} 
#left, #right{ 
    width: 100px; 
} 
#center{ 
    width: auto; /* ? */ 
    overflow: hidden; 
} 
.clear{ 
    clear:both; 
}

Ce que je dois savoir est comment puis-je le #center de re-taille quand #container est redimensionnée sans éléments se déplaçant les uns sous les autres.

Source

2010-12-14 Franky Chanyau

juste une simple correction:

This text is long and can get longer

l'id est "centre") – stecb

acclamations, je ne peux pas croire que je l'ai fait –

Vous êtes les bienvenus, pas probs;) – stecb

Essayez ces corrections (juste des éléments flottants simples, pas besoin pour définir elems absolue ou rembourrages)

just added a new fiddle

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>fluid layout</title> 
<style> 
    /*class to set the width of the columns */ 
    .floatbox{ 
     width:100px; 
    } 

    #container{ 
     width: 100%; 
     float:left; 
    } 
    #left{ 
     float:left; 
    } 
    #right{ 
     float:right; 
    } 
    #center{ 
     overflow: hidden; 
    } 
    .clear{ 
     clear:both; 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <!-- floating column to the right, it must be placed BEFORE the left one --> 
     <div class="floatbox" id="right">Right</div> 
     <div class="floatbox" id="left">Left</div> 

     <!-- central column, it takes automatically the remaining width, no need to declare further css rules --> 
     <div id="center">This text is long and can get longer</div> 

     <!-- footer, beneath everything, css is ok --> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

Source

2010-12-14 13:53:14 stecb

#container doit également être flottante (ou avec débordement: auto/masqué) pour l'atteindre. Je vous suggère fortement d'utiliser quelques-unes des solutions fluides plus bien connus: http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html

Source

2010-12-14 13:41:38 djspark

La meilleure façon de le faire et d'éviter complètement les float problèmes qui se posent serait utiliser un rembourrage sur le récipient et la position absolue gauche/droite éléments dans la zone de remplissage. (démo à http://www.jsfiddle.net/gaby/8gKWq/1)

Html

<div id="container"> 
    <div class="box" id="left">Left</div> 
    <div class="box" id="right">Right</div> 
    <div class="box" id="centre">This text is long and can get longer</div> 
</div>

L'ordre des divs n'a pas d'importance plus ..

Css

#container{ 
    padding:0 100px; 
    position:relative; 
} 
.box{ 
    /*style the boxes here*/ 
} 
#left, #right{ 
    width: 100px; 
    position:absolute; 
} 
#left{left:0;top:0;} 
#right{right:0;top:0;} 

#center{ 
    /*anything specific to the center box should go here.*/ 
}

Source

2010-12-14 13:42:22

CSS: redimensionner div largeur selon les parents largeur

Répondre

Questions connexes