Tre DIV a larghezza variabile con spazi uguali? Che dire di quattro?

Ho una sotto-navigazione molto semplice che sto cercando di costruire nella parte superiore dell'area del contenuto del mio sito web, ma i CSS non sembrano avere soluzioni semplici per un problema così comune: voglio o 3 o 4 DIV equidistanti nella parte superiore della pagina.Tre DIV a larghezza variabile con spazi uguali? Che dire di quattro?

1) ad es. 3 DIV a larghezza variabile con DI5 uguali

[[LEFT]    [CENTER]    [RIGHT]]

2) ad es. 4 DIV larghezza variabile, equidistanti

[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]

mia soluzione per il primo problema con solo 3 DIV era galleggiare div sinistra e destra, e quindi assegnare una dimensione arbitraria al DIV centrale e dargli "margine : 0 auto ". Non è davvero una soluzione, ma supponendo che non ci siano cambiamenti nella navigazione, fornisce una approssimativa approssimazione di ciò che voglio che i risultati siano.

La soluzione che ho per il secondo problema con 4 DIVs è semplicemente centrare un DIV nello stesso modo di prima, ma quindi fluttuare due DIV all'interno di esso, ad es.

[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]

Ma ancora una volta, questo richiede l'applicazione di una dimensione arbitraria al DIV centrale per l'allineamento, e se si apportano modifiche lingua o di immagine per il sito, valori di allineamento dovrà essere ricalcolato. Inoltre, è semplicemente una soluzione complicata che richiede la fusione della struttura con la presentazione.

Qualsiasi aiuto è molto apprezzato.

EDIT 2012/07/20 05:00

Va bene, ho messo la soluzione "table-cell" in posizione utilizzando percentuali, ma ho incontrato un altro problema nel mio un po 'più complessa realizzazione: la questione a la mano è che ogni DIV cui mi riferivo è in realtà un contenitore per altri due DIV che sono coppie di etichette di icone, in linea sia con float che con display: inline-block.

ad es. http://jsfiddle.net/c3yrm/1/

Come si può vedere, l'elemento finale nell'elenco viene visualizzato in modo errato.

Qualsiasi aiuto è di nuovo molto apprezzato!

EDIT 2012/07/20 07:16

soluzione finale con l'aiuto arttronics': http://jsfiddle.net/CuQ7r/4/

fonte

2012-07-20 M. Herold

Qualcosa come questo: http://jsfiddle.net/j08691/c3yrm/? – j08691

possibile duplicato di [Per un menu di navigazione fluido, come regolare il riempimento dinamico per ogni breadcrumb?] (Http://stackoverflow.com/questions/11514125/for-a-fluid-navigation-menu-how-to-adjust- padding-dynamically-for-each-breadcru) – arttronics

Questo è esattamente ciò che voglio; la "cella del grafico" ha problemi di compatibilità del browser di cui dovrei essere a conoscenza? Inoltre, sto riscontrando un problema con le div nidificate all'interno del div della tabella-cella, che modificheremo sopra. –

Riferimento: jsFiddle Pure CSS Demo

La soluzione era float singoli pangrattato durante l'utilizzo di una semplice formula per determinare la percentuale di pangrattato width basato sul valore della pangrattato totali.

fonte

2012-07-21 02:01:41 arttronics

Grazie per la soluzione. Non sapevo che fosse importante usare tag span qui invece che div. –

ol { 
    width: 400px; 
    /*width: 800px;*/ 

    display: table; 
    table-layout: fixed; /* the magic dust that ensure equal width */ 
    background: #ccc 
} 
ol > li { 
    display: table-cell; 
    border: 1px dashed red; 
    text-align: center 
}

come qui: http://jsfiddle.net/QzYAr/

fonte

2012-07-20 20:58:15

Ehi, [Riconosco] (http://stackoverflow.com/questions/6310632/html-list-element-sharing-the-parent-width-into-equal-parts/6311029#6311029) questo commento goffamente scritto! – thirtydot

si potrebbe usare percentuali, poi appena arriva alla matematica semplice:

[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px

È quindi possibile specificare una larghezza per il suo contenitore e usare

display:inline;

per tenerli in linea.

Nota: se si utilizzano i bordi per vedere cosa stanno facendo i div che aggiungono spazio non contato per cui è necessario ridurre la larghezza degli elementi dell'1% circa O semplicemente cambiare i loro colori di sfondo.

fonte

2012-07-20 21:08:27 Dom

Un modo che ho trovato per farlo è usare le scatole flessibili (o inline-flex).

Here è una grande spiegazione ed esempio di come si può fare.

Penso che in futuro le flex box saranno il modo migliore per gestire questo genere di cose, ma fino a quando gli altri browser non avranno a che fare con il modo di pensare di Mozilla su come utilizzare l'attributo flex-base (con min-content, max-content, fit-content, ecc. come valori), questi box flessibili continueranno ad essere problematici per i responsive design. Per esempio, occasionalmente il contenuto interno (a_really_really_long_word) non può adattarsi nello spazio assegnato quando la finestra è schiacciata, e quindi a volte alcune cose potrebbero non essere visibili a destra dello schermo se non stai attento.

Penso che se si utilizza la proprietà flex-wrap, si potrebbe essere in grado di garantire che tutto funzioni. Here è un altro esempio di come ciò potrebbe essere fatto (nei browser Mozilla in ogni caso).

Io tendo ad usare le scatole flessibili per carta intestata o tabelle in cui la larghezza è abbastanza fissa (non troppo piccola) perché di solito si distanziano bene; Tendo ad usare oggetti nid float e inline-block per siti web in cui il contenuto deve essere ridotto al minimo (come suggerito in alcune delle altre risposte qui).

fonte

2016-04-08 18:08:18

Tre DIV a larghezza variabile con spazi uguali? Che dire di quattro?

risposta

Problemi correlati