CSS: resize div-Breite je nach Breite Eltern

Ok, ich bin im Grunde Bau eines fluid Layouts.
Meine HTML sieht so aus:

<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 der 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 zu re-Größe, wenn #container ist die Größe neu, ohne die Elemente zu verschieben unter einander.

  • nur eine einfache Korrektur: <div class="box" id="Center">Dieser text ist lang und kann länger</div> die id ist "center" 😉
  • cheers, ich kann nicht glauben, ich wusste, dass
  • Sie sind willkommen, keine probs 😉
InformationsquelleAutor Franky Chanyau | 2010-12-14
  1. 2

    Versuchen Sie diese Korrekturen (nur einfache bewegliche Elemente, keine Notwendigkeit, absolute elems oder Polstern)

    gerade Hinzugefügt eine neue Geige

    <!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>
    InformationsquelleAutor stecb
  2. 1

    #container muss auch geschwommen werden (oder mit overflow: auto/hidden) zu erreichen.
    Ich empfehle, dass Sie verwenden einige der bekannten flüssigen Lösungen: http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html

    InformationsquelleAutor djspark
  3. 1

    Der einfachste Weg, dies zu tun und komplett zu vermeiden float Probleme, die entstehen würde
    verwenden Polsterung, die auf den container und die absolute position der Links - /rechts-Elementen den padding-Bereich. (demo auf 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 ist nicht mehr wichtig..

    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.*/
}
    InformationsquelleAutor Gabriele Petrioli
Schreibe einen Kommentar