Flusso colonne CSS 3 (2 fisse, 1 dinamico)

Sto progettando un header composto da 3 parti. dimensione min-width:940px; max-width:1200px;Flusso colonne CSS 3 (2 fisse, 1 dinamico)

Le prime due parti dell'intestazione saranno fissati::

La pagina deve essere fluido

left  middle  right 
<---------><---------><-----------------> 
    134px  183px  (Fill the remaining space)

vorrei la parte destra di cambiare a seconda della dimensione della pagina , Incollo quello che ho finora ma il mio problema è di riempire completamente il vuoto.

HTML:

<div class="main"> 

<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div>

CSS:

.main{ 
     margin:auto; 
     min-width:940px; 
     max-width:1200px; 
     background-color:#000; 
    } 

    .left{ 
    float: left; 
    width: 134px; 
    height: 191px; 
    background-color:#0000ff; 
    } 
    .middle{ 
    float: left; 
    width: 183px; 
    height: 191px; 
    background-color:#ffff00; 
    } 

    .right{ 
    float: left; 
    width: 60%; 
    height: 191px; 
    background-color:#ff0000; 
    }

fonte

2009-07-18 Anonymous

Riempi il vuoto all'intestazione o al resto della pagina? – random

Prova questo:

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; } 
div.right { height: 191px; background-color: #ff0000; margin-left: 317px; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 
</div> 
</body> 
</html>

fonte

2009-07-18 10:45:39 cletus

spot on, grazie mille! –

Codepen: http://codepen.io/clouddueling/pen/wyIcC –

io non ho abbastanza fama di commentare, ma volevo solo approvare la correttezza del risposta precedente Ero alla ricerca di qualcosa di leggermente diverso: liquido fisso-fisso, in modo ottimizzato come segue:

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { height: 191px; background-color: #ff0000; margin-left: 134px; margin-right: 183px;} 
div.right { float: right; width: 183px; height: 191px; background-color:#ffff00; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="middle"></div> 
</div> 
</body> 
</html>

punti chiave da notare: - i margini, con galleggiante, sono utilizzati per evitare che il corpo si sovrappongono con i bordi. - nel mio caso, è necessario invertire l'ordine dei div nel codice HTML - in realtà non è necessario un div per il "mezzo". Un sito che fa a meno è il blog di Quirksmode (semplicemente imposta i margini direttamente sull'elemento "body"): http://www.quirksmode.org/blog/archives/browsers/index.html

fonte

2010-10-19 05:29:32

Flusso colonne CSS 3 (2 fisse, 1 dinamico)

risposta

Problemi correlati