Hi, Flo!
is
this
what
you are looking for?
Ho qualcosa del genere:
menu content entrambi i galleggianti sono necessari. Voglio che il content div riempia tutto lo schermo meno quei 100px per il menu. Se non uso float il div si espande esattamente come dovrebbe. Ma come faccio a impostarlo quando è impostato float? Se io uso sth come
style=width:100%
quindi il div del contenuto ottiene la dimensione del genitore, che è il corpo o un altro div che ho anche provato, e quindi ovviamente non si adatta al menu e viene quindi mostrato di seguito.
Spero di aver capito bene, dai un’occhiata a questo: http://jsfiddle.net/EAEKc/
Content with Menu Hi, Flo!
is
this
what
you are looking for?
Il modo più cross-compatibile che ho trovato di fare questo non è molto ovvio. È necessario rimuovere il float dalla seconda colonna e applicare l’ overflow:hidden ad esso. Sebbene questo sembrerebbe hide qualsiasi contenuto che vada al di fuori del div, in realtà costringe il div a rimanere all’interno del suo genitore.
Usando il tuo codice, questo è un esempio di come potrebbe essere fatto:
menu
Spero che questo sia utile a chiunque abbia questo problema, è quello che ho trovato funziona meglio per il sito che stavo costruendo, dopo aver provato a farlo aggiustare ad altre risoluzioni. Sfortunatamente, questo non funziona se includi un div corretto dopo il contenuto, se qualcuno conosce un buon modo per farlo funzionare, con una buona compatibilità IE, sarei molto felice di sentirlo.
display: flex; Ora che il modello Flexbox è abbastanza ampiamente implementato, in realtà lo consiglio di utilizzarlo, poiché consente una maggiore flex con il layout. Ecco una semplice due colonne come l’originale:
menu content
Ed ecco un tre colonne con una colonna centrale a larghezza flessibile!
menu content sidebar
.content .right{ overflow: auto; background-color: red; }
+1 per Merkuro, ma se la dimensione del float cambia, il tuo margine fisso fallirà. Se usi sopra i CSS a destra div , cambierà di molto le dimensioni cambiando le dimensioni sul float di sinistra. È un po ‘più flessibile del genere. Controlla il violino qui: http://jsfiddle.net/9ZHBK/144/
Gli elementi flottanti vengono eliminati dal normale layout del stream e gli elementi di blocco, come i DIV, non coprono più la larghezza del genitore. Le regole cambiano in questa situazione. Invece di reinventare la ruota, consulta questo sito per alcune possibili soluzioni per creare il layout a due colonne che stai cercando: http://www.maxdesign.com.au/presentation/page_layouts/
In particolare, il “layout Liquid Two-Column”.
Saluti!
Questa è una soluzione aggiornata per HTML 5 se qualcuno è interessato e non ama “fluttuare”.
La tabella funziona benissimo in questo caso poiché puoi impostare la larghezza fissa sul tavolo e sulla tabella-cella.
.content-container{ display: table; width: 300px; } .content .right{ display: table-cell; background-color:green; width: 100px; }
http://jsfiddle.net/EAEKc/596/ codice sorgente originale da @merkuro
questo utilizzo può risolvere il tuo problema.
width: calc(100% - 100px);
Content with Menu Hi, Flo!
is
this
what
you are looking for?
E in base alla soluzione di merkuro , se desideri massimizzare quella a sinistra, dovresti usare:
Content with Menu is
this
what
you are looking for?
Hi, Flo!
Non è stato testato su IE, quindi potrebbe sembrare rotto su IE.
La risposta accettata potrebbe funzionare, ma non mi piace l’idea di margini sovrapposti. In HTML5, lo faresti con display: flex; . È una soluzione pulita. Basta impostare la larghezza per un elemento e flex-grow: 1; per l’elemento dinamico. Una versione modificata di merkuros fiddle: https://jsfiddle.net/EAEKc/1499/
Ciao, c’è un modo semplice con il metodo nascosto overflow sull’elemento giusto.
.content .left { float:left; width:100px; background-color:green; } .content .right { overflow: hidden; background-color:red; }
Content Menu Hi, Flo! I am Left
is
this
what
you are looking for?
It done with overflow hidden and result is same.
Questo potrebbe funzionare:
div{ display:inline-block; width:100%; float:left; }