Layout CSS - larghezza dinamica DIV

Question

Ho un problema di layout piuttosto comune che ho tradizionalmente utilizzato per risolvere un tavolo, ma vorrei qualche consiglio su come farlo con i CSS. Ho 3 immagini che trucco un 'contenitore'. Di solito le immagini sinistra e destra vengono mostrate usando i tag e l'immagine centrale viene visualizzata come "immagine di sfondo" con i miei contenuti su di esso, in modo che il contenuto appaia nel contenitore. Sono sicuro che hai visto/usato questo un milione di volte:

<table width="100" cellpadding="0"><tr> 
<td width="50"><img src="myleftimage" /></td> 
<td style="background: url('mymiddleimage');">Content goes here...</td> 
<td width="50"><img src="myrightimage" /></td> 
</tr></table> 

la cosa bella di questo è che la larghezza della tabella è sempre la larghezza del browser (o il genitore) e la colonna centrale in cui il contenuto è dinamicamente le dimensioni di prendere il restante spazio tra le immagini sinistra/destra

Quello che voglio è ricreare questo usando i CSS, con informazioni poco codificato duro come possibile, in modo simile a questo:..

<div style="float:left; width:100%"> 
    <div style="width: 50px;float:left;"><img src="myleftimage" /></div> 
    <div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div> 
    <div style="width: 50px;float:left;"><img src="myrightimage" /></div> 
</div> 

Questo funziona molto bene per il medio div -come faccio a impostare la larghezza? In questo momento posso hardcodificarlo per essere, per esempio, il 92%, ecc. Ma voglio che lo faccia riempire automaticamente lo spazio. Può essere fatto usando solo i CSS?

Answer 1

provare

<div style="width:100%;"> 
    <div style="width:50px; float: left;"><img src="myleftimage" /></div> 
    <div style="width:50px; float: right;"><img src="myrightimage" /></div> 
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div> 
</div> 

o

<div style="width:100%; border:2px solid #dadada;"> 
    <div style="width:50px; float: left;"><img src="myleftimage" /></div> 
    <div style="width:50px; float: right;"><img src="myrightimage" /></div> 
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div> 
<div style="clear:both"></div>  
</div> 

Answer 2

Questo farà quello che vuoi. Fissi i lati con una larghezza di 50px e il contenuto riempie l'area rimanente.

<div style="width:100%;"> 
    <div style="width: 50px; float: left;">Left Side</div> 
    <div style="width: 50px; float: right;">Right Side</div> 
    <div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div> 
</div> 

Answer 3

Oppure, se si conosce la larghezza delle due immagini "collaterali" e non si vuole affrontare con i galleggianti:

<div class="container"> 
    <div class="left-panel"><img src="myleftimage" /></div> 
    <div class="center-panel">Content goes here...</div> 
    <div class="right-panel"><img src="myrightimage" /></div> 
</div> 

CSS:

.container { 
    position:relative; 
    padding-left:50px; 
    padding-right:50px; 
} 

.container .left-panel { 
    width: 50px; 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

.container .right-panel { 
    width: 50px; 
    position:absolute; 
    right:0px; 
    top:0px; 
} 

.container .center-panel { 
    background: url('mymiddleimage'); 
} 

Note:

Posizione: relativo al div principale viene utilizzato per posizionare i bambini posizionati in modo assoluto rispetto a quel nodo.

Answer 4

fare una larghezza dynamycal con i dispositivi mobili supportano

http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html