CSS: Größe ändern div Breite nach Eltern Breite

Ok, ich bin im Grunde ein flüssiges Layout zu bauen. Mein HTML ist wie folgt:CSS: Größe ändern div Breite nach Eltern Breite

<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>

Hier ist die CSS:

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

Was ich wissen muss, ist, wie bekomme ich die #center die Größe neu, wenn #container wird die Größe neu, ohne die Elemente, die sich untereinander bewegen.

Quelle

2010-12-14 Franky Chanyau

nur eine einfache Korrektur einzustellen:

This text is long and can get longer

die ID ist "center";) – stecb

cheers, ich kann nicht glauben, ich habe das –

Sie sind willkommen, keine probs;) – stecb

diese Korrekturen Versuchen (nur einfache schwebende Elemente, keine Notwendigkeit absolute elems oder Polsterungen)

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>

Quelle

2010-12-14 13:53:14 stecb

#container muss auch Floated (oder mit Überlauf: Auto/versteckt), um es zu erreichen. empfehle ich Ihnen einige der bekannteren Fluid Lösungen verwenden: http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html

Quelle

2010-12-14 13:41:38 djspark

Der einfachste Weg, dies zu tun und die float Probleme vollständig zu vermeiden, die auf dem Behälter Verwendung Polsterung und die absolute Position wäre entstehen links/rechts Elemente im Auffüllbereich. (Demo bei 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>

Die Reihenfolge der divs mehr spielt keine Rolle ..

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.*/ 
}

Quelle

2010-12-14 13:42:22

CSS: Größe ändern div Breite nach Eltern Breite

Antwort

Verwandte Themen