Forzare un div a crescere più larga della finestra del browser

Come posso forzare un DIV a crescere più larga della finestra del browser per ospitare sia i bambini in orizzontale, piuttosto che costringerli a nuove righeForzare un div a crescere più larga della finestra del browser

cioè considerare il seguente codice con il violino . Ci sono 6 elementi figlio all'interno di un elemento contenitore, tutti con una larghezza minima di 200 px e tutti impostati su float: a sinistra. Quando la finestra viene ridimensionata sufficientemente larga, sono tutti su una riga. Quando viene ridotto, iniziano a spingere verso nuove righe. Idealmente mi piacerebbe che restassero su una singola riga e che il browser visualizzasse una barra di scorrimento.

http://jsfiddle.net/krippy2k/x8sDp/20/

.container { 
} 

.child-element { 
    min-width: 200px; 
    float: left; 
    height: 100px; 
} 

.child1 { 
    background-color: purple; 
} 
.child2 { 
    background-color: orange; 
} 
.child3 { 
    background-color: black; 
} 
.child4 { 
    background-color: green; 
} 
.child5 { 
    background-color: blue; 
} 
.child6 { 
    background-color: red; 
} 

<div class="container"> 
    <div class="child-element child1"></div> 
    <div class="child-element child2"></div> 
    <div class="child-element child3"></div> 
    <div class="child-element child4"></div> 
    <div class="child-element child5"></div> 
    <div class="child-element child6"></div> 
</div>

fonte

2013-08-20 Gerald

entrambi i casi è possibile fornire una width all'elemento genitore, altrimenti è possibile utilizzare float: left; con display: inline-block; e white-space: nowrap;

.container { 
    white-space: nowrap; 
} 

.child-element { 
    min-width: 200px; 
    display: inline-block; 
    height: 100px; 
}

Demo

Per la white-space di 4px tra ogni el ement, è possibile utilizzare margin-left: -4px;

Demo 2

fonte

2013-08-20 15:44:44

ho avuto fondamentalmente la stessa domanda del PO e questa risposta è stata la soluzione migliore. Qualcosa che ho aggiunto era fluttuare nel container. Questo ha dato al contenitore la larghezza dei suoi figli piuttosto che la larghezza del riquadro di delimitazione dei contenitori. – Brodie

Lo spazio bianco tra gli elementi è in realtà lo spazio bianco fisico (spazi, tabulazioni, linee nuove) nel html (ridotto a un singolo spazio) tra i tag secondari, reso in qualsiasi font/dimensione che è caduto a cascata. Per eliminarlo, puoi impostare 'font-size: 0;' nel contenitore, ricordando di impostarlo esplicitamente se necessario nei bambini. –

Aggiunta di una larghezza enorme al contenitore funziona

.container { 
    width: 999999px; 
}

Anche se non sono sicuro perché si vuole fare qualcosa di simile, da un punto di usabilità/interfaccia di vista.

fonte

2013-08-20 15:45:29 cernunnos

FYI è per un designer del flusso di lavoro che può avere molti livelli di elementi annidati. Alcuni elementi sono pensati per essere affiancati, come le clausole Then/Else, che diventano più difficili da leggere quando Else è forzato sotto il Then. – Gerald

Vedo, non sarebbe preferibile una qualche forma di visualizzazione ad albero? Non so davvero cosa stai facendo, ma lo scorrimento orizzontale orizzontale + verticale di solito causa interfacce molto confuse, a meno che il tuo target non sia il touch screen. Di nuovo, questa è un'opinione piuttosto disinformata. – cernunnos

Ho pensato a un albero ma sarebbe stato fastidioso a causa della quantità di trascinamento e rilascio necessaria.Per essere produttivi con esso durante la progettazione e la risoluzione dei problemi, l'albero avrebbe davvero bisogno di rimanere comunque completamente espanso, il che ci lascerebbe lo stesso problema. Il designer di Workflow Foundation in Visual Studio 2012 è molto simile a quello che sto cercando. – Gerald

Invece di spostare i bambini, impostarli su blocco in linea e impostare white-space:nowrap sul contenitore.

.container { 
    white-space:nowrap; 
} 

.child-element { 
    display:inline-block; 
    min-width: 200px; 
    height: 100px; 
}

http://jsfiddle.net/x8sDp/24/

fonte

2013-08-20 15:45:46

IMHO questa è una soluzione migliore in quanto il floating può avere conseguenze non intenzionali sul resto del layout, in quanto sostanzialmente estrae l'elemento dal flusso del resto della struttura della pagina. Spesso le volte galleggianti creano un po 'di situazioni di marionette difficili da gestire. – orionrush

Basta impostare il .container al display:table e il .child-elements di essere display:table-cell e rimuovere float:left da .child-element:

.container { 
    display: table; 
} 

.child-element { 
    min-width: 200px; 
    display: table-cell; 
    height: 100px; 
}

DEMO

fonte

2013-08-20 15:46:50 mattytommo

Forzare un div a crescere più larga della finestra del browser

risposta

Problemi correlati