Regolazione dinamica di due colonne esterne alla larghezza variabile della colonna centrale

Question

Mi considero un codificatore CSS/HTML intermedio/avanzato, ma sono perplesso su come eseguire il seguente scenario. Sto iniziando a pensare è impossibile ma voglio davvero crederci.

Diciamo che la larghezza del wrapper è 1000px.

All'interno è di tre colonne. Le due colonne esterne hanno la stessa larghezza, questa larghezza è decisa dalla colonna centrale. La colonna centrale è l'unica con contenuto, solo una riga di testo con 30 px di riempimento su entrambi i lati. Quindi se la riga di contenuto è 100px con padding, le altre due colonne sarebbero (1000-100)/2 ciascuna ..

C'è un modo dinamico per regolare le due colonne esterne alla larghezza variabile del colonna centrale che è definita dai suoi contenuti variabili, una riga di testo?

grafica di quello che sto cercando di realizzare:

Answer 1

buone 'tavoli ole per il salvataggio:

http://jsfiddle.net/hgwdT/

In realtà penso che le tabelle sono il diavolo, ma questo funziona come hai descritto. Ed ecco che sta usando display: table-cell dei div bambino, quindi è funzionalmente lo stesso utilizzando più bello markup:

http://jsfiddle.net/XXXdB/

L'elemento centrale può effettivamente avere una larghezza dinamica; per evitare che il contenuto venisse schiacciato, ho semplicemente aggiunto uno white-space: nowrap allo p contenente il testo.

Ho anche confermato che questa soluzione funziona in IE8 e FF, oltre a Chrome.

Answer 2

Il molto più vicino ho potuto venire con era quello di utilizzare display: table; e tabella-cella. Questo crea l'effetto dinamico che stai cercando, ma non penso che tu possa ottenere l'effetto desiderato senza impostare una larghezza esplicita all'elemento centrale.

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

È possibile check out my attempt here, ha alcuni tasti per voi a vedere i diversi stati, larghezza on/off e aggiungere testo, ecc (il jQuery non ha nulla a che fare con la soluzione)

Penso che questo sia il più vicino possibile con il puro CSS.

Answer 3

Questa non è la soluzione più elegante, ma funziona. Volevo seguire la pura rotta CSS, ma non riuscivo a capirlo. Bel lavoro, jblasco e Kyle Sevenoaks, a pensarci!

Ecco il mio jsFiddle demo.Se non ti dispiace utilizzando un po 'di JavaScript se (utilizzando jQuery nel mio esempio):

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); 
}