2013-06-04 74 views
11

Voglio rendere per il mio sito di marketing un layout a 3 colonne con immagini nel banner superiore.Layout liquido a 3 colonne CSS con colonna centrale fissa

Voglio avere un liquido sinistra/destra con un centro fisso. L'html sarebbe idealmente simile a questa:

<div id="pixelLeft">&nbsp;</div> 
<div id="bannerCenter"> 
    <img src="images/mybanner.png" /> 
</div> 
<div id="pixelRight">&nbsp;</div> 

<style> 
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; } 
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; } 
#bannerCenter { /* something here to make fixed width of 1550px */ } 
</style> 

Le immagini ai lati dei pixel sinistra/destra sono 1px x 460PX. L'immagine mybanner.png è 1550px x 460px.

Grazie in anticipo! (Soprattutto se funzionerà in TUTTI i browser!)

risposta

16

È utile?

CSS Only Demo

jQuery Demo(Cross Browser Compatible)

<div class="wrap"> 
    <div id="pixelLeft">&nbsp;</div> 
    <div id="bannerCenter"> 
     <img src="images/mybanner.png" /> 
    </div> 
    <div id="pixelRight">&nbsp;</div> 
</div> 
<div style="clear:both;"></div> 

*{ 
    margin:0; 
    padding:0; 
} 
#bannerCenter{ 
    background:#ddd; 
    width: 500px; 
    float:left; 
} 
#pixelLeft{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:left; 
} 
#pixelRight{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:right; 
} 

#bannerCenter,#pixelLeft,#pixelRight{ 
    height: 400px; 
} 

È possibile utilizzare jQuery invece di utilizzare calc(50% - 250px); per renderlo compatibile per browser meno recenti.

$(document).ready(function() { 
    $(window).on('resize', function() { 
     $('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2); 
    }).trigger('resize');  
}); 
+0

Questo è incredibilmente vicino, ma l'ho provato in IE7 ed è tutto spostato a sinistra ... Questa è una soluzione MOLTO elegante e quello che sto cercando. Possiamo aggiustare l'ultimo bit? Grazie!! –

+1

** + 1 ** Perfetto :) –

+0

Questo è sicuro all'inizio, ma quando comincio a ridimensionare la finestra le cose diventano un po 'goffe. –

1

Ci sono diverse soluzioni a questo, probabilmente il post popolare di cui è il metodo del Santo Graal. È un po 'sopra la mia testa, ma questi link lo spiegano abbastanza bene.

http://alistapart.com/article/holygrail

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Vorrei iniziare con l'articolo A List di parte. In bocca al lupo.

Dopo aver ri-lettura, credo che questo è quello che vorrei fare:

HTML

<div id="header"> 
</div><div id="container"> 
    <div id="center" class="column"></div> 
    <div id="left" class="column"></div> 
    <div id="right" class="column"></div> 
</div><div id="footer"></div> 

CSS

body { 
    min-width: 550px;  /* 2x LC width + RC width */ 
} 
#container { 
    padding-left: 200px; /* LC width */ 
    padding-right: 150px; /* RC width */ 
} 
#container .column { 
    position: relative; 
    float: left; 
} 
#center { 
    width: 100%; 
} 
#left { 
    width: 200px;   /* LC width */ 
    right: 200px;   /* LC width */ 
    margin-left: -100%; 
} 
#right { 
    width: 150px;   /* RC width */ 
    margin-right: -150px; /* RC width */ 
} 
#footer { 
    clear: both; 
} 
/*** IE6 Fix ***/ 
* html #left { 
    left: 150px;   /* RC width */ 
} 

avrete bisogno di regolare alcune delle dimensioni, ma i commenti in linea dovrebbero aiutare in questo. Così il gioco è fatto. Il layout del Santo Graal.

+0

Grazie per il post, ma il primo è effettivamente al contrario. Sto cercando di avere il centro fisso e i lati fluidi. –

9

Ecco una buona soluzione, a mio parere il più facile. Sembra pulito e non ha bisogno di wrapper div.

Demo

HTML

<body> 

<div id="left_container"> 
    <div id="left"> 
     left content 
    </div> 
</div> 

<div id="center"> 
    center content 
</div> 

<div id="right_container"> 
    <div id="right"> 
     right content 
    </div> 
</div> 

</body> 

CSS

#left_container { 
    width:50%; 
    float:left; 
    margin-right:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 200px; 
} 
#left { 
    margin-right:480px; /* half of the center container width */ 

    /* not important */ 
    background: #888; 
    height: 600px; 
} 
#center { 
    width:960px; /* size of the fixed width */ 
    float:left; 

    /* not important */ 
    color: #FFF; 
    background: #333; 
    height: 500px; 
} 
#right_container { 
    width:50%; 
    float:right; 
    margin-left:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 300px; 
} 
#right { 
    margin-left:480px; /* half of the center container width */ 

    /* not important */ 
    height: 300px; 
    background-color: #888; 
} 

godere!

+0

Ottima soluzione, non richiede alcun markup JS o CSS3. –

+1

Grazie! Vorrei anche notare che #left_container dovrebbe avere il margin-left: auto, altrimenti si sposterà sul lato sinistro. – liepumartins

+0

Grazie, questo mi ha aiutato con il mio menu mobile, funziona perfettamente con l'aggiornamento – Scott

0

<body> 
 
    <div style=" width: 200px; float: left; background: red; height: 100px;">Left</div> 
 
    
 
    <div style=" float: right; width: 200px; background: red; height: 100px;">Right</div> 
 
    <div style=" background: blue; margin:0 auto; height:100px;">Center content goes here</div> 
 
</body>

Ecco semplice trucco per HTML e CSS solo per fare una struttura così stratificata e manterrà strato intermedio nel centro, anche se si ridimensiona browser.

Problemi correlati