Dynamische Anpassung der beiden äußeren Spalten an die variable Breite der mittleren Spalte

Question

Ich würde mich selbst als einen mittleren/fortgeschrittenen CSS/HTML-Codierer betrachten, aber ich bin ratlos, wie ich das folgende Szenario umsetzen soll. Ich fange an zu denken, dass es unmöglich ist, aber ich möchte wirklich glauben, dass es ist

Nehmen wir an, die Breite des Wrappers beträgt 1000px.

Darin befinden sich drei Spalten. Die beiden äußeren Spalten sind gleich breit, diese Breite wird durch die mittlere Spalte bestimmt. Die mittlere Spalte ist die einzige mit Inhalt, nur eine Zeile Text mit 30px Polsterung auf jeder Seite. Also, wenn die Zeile des Inhalts ist 100px mit Polsterung, als die anderen beiden Spalten wäre (1000-100)/2 jeder

Gibt es eine dynamische Möglichkeit, die beiden äußeren Spalten an die variierende Breite der mittleren Spalte anzupassen, die durch ihren variierenden Inhalt, eine Zeile Text, definiert ist?

Grafik zu dem, was ich zu erreichen versuche:

Answer 1

Das Naheliegendste, was ich finden konnte, war die Verwendung von display: table; und table-cell. Dies schafft den dynamischen Effekt, den Sie suchen, aber ich glaube nicht, dass Sie Ihren gewünschten Effekt ohne Einstellung einer expliziten Breite auf das zentrale Element erhalten können.

HTML:

<div id="wrap">
    <div id="left">
        Left
    </div>
    <div id="center">
        center
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS:

#wrap
{
    width: 1000px;
    display: table;
}

#wrap div
{
    display: table-cell;
    border: 1px solid #000;
    width: auto;
}

#center
{
    padding: 0 30px;
    text-align: center;
}

Sie können Sehen Sie sich meinen Versuch hier an Es hat einige Schaltflächen, mit denen Sie die verschiedenen Zustände, die Breite an/aus und den Text usw. sehen können (jQuery hat nichts mit der Lösung zu tun).

Ich denke, das ist das Beste, was man mit reinem CSS erreichen kann.

Answer 2

Die guten alten Tabellen sind die Rettung:

http://jsfiddle.net/hgwdT/

Eigentlich denke ich, dass Tabellen der Teufel sind, aber das funktioniert so, wie Sie es beschrieben haben. Und so ist es hier mit display: table-cell auf den Child-Divs, so dass es funktionell dasselbe ist, nur mit schönerem Markup:

http://jsfiddle.net/XXXdB/

Das mittlere Element kann tatsächlich eine dynamische Breite haben; um zu verhindern, dass der Inhalt gequetscht wird, habe ich einfach ein white-space: nowrap zum p die den Text enthält.

Ich habe auch bestätigt, dass diese Lösung nicht nur in Chrome, sondern auch in IE8 und FF funktioniert.

Answer 3

Dies ist nicht die eleganteste Lösung, aber sie funktioniert. Ich wollte die reine CSS-Route gehen, aber konnte es nicht herausfinden. Gute Arbeit, jblasco und Kyle Sevenoaks, um das herauszufinden!

Hier ist mein jsFiddle-Demo . Wenn es Ihnen nichts ausmacht, ein wenig JavaScript zu verwenden (in meinem Beispiel unter Verwendung von jQuery):

HTML:

<div id="wrapper">
    <div class="side"></div>
    <div id="middle">One line of text.</div>
    <div class="side"></div>
</div>

CSS:

#wrapper {
    margin: 0 auto;
    width: 1000px;    
}

#wrapper div {
    float: left;   
    height: 300px;
}

.side {
    background: #ddd;   
}

#middle {
    background: #eee;  
    padding: 0 30px;
    text-align: center;
}

JavaScript:

var adjustSize = function(){
    // Declare vars
    var wrapper = $('#wrapper'),
        middle = $('#middle'),
        totalWidth = wrapper.width(),
        middleWidth = middle.width(),
        middleOuterWidth = middle.outerWidth(),
        remainingWidth = totalWidth - middleOuterWidth,
        sideWidth;

    if(remainingWidth % 2 === 0){
        // Remaining width is even, divide by two
        sideWidth = remainingWidth/2;
    } else {
        // Remaining width is odd, add 1 to middle to prevent a half pixel
        middle.width(middleWidth+1);
        sideWidth = (remainingWidth-1)/2;  
    }

    // Adjust the side width
    $('.side').width(sideWidth);
}