Interrompi il wrapping dei div mobili

85

Voglio avere una riga di div (celle) che non vanno a capo se il browser è troppo stretto per adattarli.

Ho cercato Stack e non sono riuscito a trovare una risposta funzionante a quella che penso dovrebbe essere una semplice domanda CSS.

Le celle hanno una larghezza specificata. Tuttavia non voglio specificare la larghezza della riga, la larghezza dovrebbe essere automaticamente la larghezza delle sue celle figlie.

Se il viewport è troppo stretto per accogliere le righe, il div dovrebbe traboccare di barre di scorrimento.

Fornisci la tua risposta come snippet di codice funzionante, poiché ho provato molte delle soluzioni che ho visto altrove (come specificare la larghezza: 100% e non sembrano funzionare).

Sto cercando una soluzione solo HTML / CSS, niente JavaScript.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>
Espandi lo snippet

Al momento sto effettivamente codificando la larghezza della riga su un numero molto grande.

html  css-float  word-wrap 
— Nicholas
fonte
1
una delle risposte seguenti ha funzionato per te? Non sto avendo alcun successo con nessuno di loro.
— John Fitzpatrick
Ho appena provato tutte le risposte e nessuna ha funzionato per me. Il problema era che dovevo centrare due div a sinistra flottanti e impedire che quello a destra venisse spinto in basso a sinistra dopo che la finestra è stata ridimensionata.
— Bashevis
@Nicholas Penso che il mio esempio sia esattamente quello che stai cercando, oggi mi sono imbattuto in questo stesso problema. I menu a discesa traboccano ma il primo livello non va a capo.
— John

Risposte:

109

La proprietà CSS è display: inline-blockstata progettata per soddisfare questa esigenza. Puoi leggere qualcosa al riguardo qui: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Di seguito è riportato un esempio del suo utilizzo. Gli elementi chiave sono che l' rowelemento ha white-space: nowrape gli cellelementi hanno display: inline-block. Questo esempio dovrebbe funzionare sulla maggior parte dei principali browser; una tabella di compatibilità è disponibile qui: http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>
— Calvin
fonte
1
Aggiungi <!DOCTYPE html>o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">all'inizio dell'HTML per fare in modo che IE non sia impostato come predefinito sulla modalità quirks.
— Cees Timmerman
4
Nota: ho impostato i miei div di tipo cella con float: left, e questo ha costretto lo stile calcolato a essere block, invece che inline-block. Ci è voluto un po 'per capirlo, quindi ho pensato che fosse meglio condividerlo.
— Steve Hibbert,
Questo non funziona con l'ultima cellula float: right, vero?
— Andy
3
Questo non è davvero un esempio di come mantenere galleggiavano div da imballaggio - basta unfloated le celle. Ho un layout con alcuni float sinistro e destro, quindi non posso eliminare i float per risolvere il problema del wrapping.
— Andy
Haha, abbastanza giusto. È una distinzione pedante, ma hai ragione. Non ho risolto "fermare il wrapping dei div con float", ho risolto la vera domanda del richiedente "come faccio a far funzionare il mio layout". Per rispondere al primo: sono ragionevolmente sicuro che non ci sia modo di impedire il wrapping dei div flottati. Proprio come il richiedente, dovrai trovare un modo diverso per codificare il layout che stai descrivendo.
— Calvin
32

Si desidera definire min-widthsulla riga in modo che quando il browser viene ridimensionato non vada al di sotto e si avvolga.

— farooq
fonte
1
Funzionerebbe anche con i galleggianti. Penso che sia la vera risposta.
— Danon
2
D'accordo con @Danon: funziona mentre il blocco in linea ha introdotto problemi di allineamento verticale.
— dlchambers
1
Dipende dalle tue esigenze. Questo impedisce ai div flottati di andare a capo quando la pagina viene ridimensionata, ma il richiedente ha dichiarato "Non voglio specificare la larghezza della riga, la larghezza dovrebbe essere automaticamente la larghezza delle sue celle figlie". La specifica manuale della larghezza richiede un lavoro duplicato, poiché è necessario calcolare la larghezza totale della riga. Ancora peggio, se le tue celle hanno una larghezza variabile (ad esempio, perché sono ridimensionate in una riga di testo al loro interno), calcolare il totale potrebbe essere poco pratico o impossibile.
— Calvin
1
-1; Ciò va contro quanto dichiarato specificamente dal PO nella sua domanda, vale a dire NON dover specificare la larghezza. +1 al commento di Calvin sopra.
— Teodor Sandu
5

Dopo aver letto la risposta di John, ho scoperto che quanto segue sembrava funzionare per noi (non richiedeva di specificare la larghezza):

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>
— Kevin LeBlanc
fonte
Questo ha risolto un problema che avevo con i div trascinabili sull'iPhone. Quando i div contenevano più di una parola e venivano trascinati sul bordo dello schermo, il div andava a capo in modo che ci fosse una parola su entrambe le righe. Comunque ha overflow: visible; white-space: nowrap;fatto il trucco per me. Grazie!
— TryHarder
4
Ha funzionato perché ha liberato le cellule. Non è proprio una soluzione per evitare che i div fluttuanti si avvolgano
— Andy
1

L'unico modo in cui sono riuscito a farlo è utilizzando overflow: visible;e width: 20000px;sull'elemento genitore. Non c'è modo di farlo con il livello CSS 1 di cui sono a conoscenza e mi sono rifiutato di pensare che avrei dovuto fare tutto il possibile con il livello CSS 3. L'esempio seguente ha 18 menu che si estendono oltre il mio LCD con risoluzione 1920x1200 , se lo schermo è più grande, duplica semplicemente gli elementi del menu di primo livello o ridimensiona il browser. In alternativa e con livelli leggermente inferiori di compatibilità del browser è possibile utilizzare le media query CSS3.

Ecco una dimostrazione di esempio completa di copia / incolla ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>
— John
fonte
Quando uso la risposta upvoted e sostituire width:100%con width:1000pxesso funziona per me
— Nick.McDermaid
@ Nick.McDermaid Ho usato 20K pixel per un motivo, con gli schermi 4K in uscita sai che alla fine ci saranno 8K e così via, quindi è meglio lavorare con un numero follemente alto per mantenerlo funzionante per quegli anni extra fino a quando gli schermi non saranno più alti -risoluzione della vita stessa. ;-)
— Giovanni
Ho capito ... sono solo felice di aver smesso di incartare. CSS-mi fa impazzire anche con gli strumenti F12. Non so come qualcuno abbia fatto qualcosa senza di loro.
— Nick.McDermaid
1
Per riferimento futuro: l'utilizzo di una larghezza / altezza enorme è altamente inefficiente perché il browser memorizza ancora una grande scatola non necessaria in memoria. Imposta il contenitore su white-space: nowrap;e i bambini su display: inline-block;come già detto in altre risposte (o ripiega su display: table;e display: table-cell;).
— gyo
main > * > * {background-color: #000;}O_o
— theflowersoftime
0

Per me (utilizzando bootstrap), unica cosa che ha funzionato è stato l'impostazione display:absolute;z-index:1sulla ultima cella.

— Spikolynn
fonte
1
display:absolutenon è valido CSS
— caiosm1005
Probabilmente significava posizione
— Vaaljan
-1

Ho avuto un problema in qualche modo simile in cui un'area delimitata consisteva in un'immagine in un float: blocco sinistro e un blocco di testo non float. L'area ha una larghezza fluida. Il testo dovrebbe, per impostazione predefinita, avvolgere lungo il lato destro dell'immagine. Il problema era che il testo iniziava con un tag <h2>, la cui prima parola è la minuscola parola "Da". Poiché ho ridimensionato la finestra a una larghezza inferiore, il testo non flottante, per un certo intervallo di larghezze, lascerebbe solo la parola "Da" nella parte superiore dell'area di avvolgimento, il resto del testo essendo stato schiacciato sotto il flottante bloccare. La mia soluzione è stata quella di ingrandire la prima parola del tag, sostituendo lo spazio che lo seguiva con questo codice, <span style = "opacity: 0;"> x </span>. L'effetto era di rendere la prima parola, invece di "From", "FromxNextWord", dove la "x", essendo invisibile, sembrava uno spazio. Ora la mia prima parola era abbastanza grande da non essere abbandonata dal resto del blocco di testo.

— Jim
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.