Verhindern Sie, dass schwebende Divs verpackt werden

84

Ich möchte eine Reihe von Divs (Zellen) haben, die nicht umbrochen werden, wenn der Browser zu schmal ist, um sie anzupassen.

Ich habe Stack durchsucht und konnte keine funktionierende Antwort auf eine meiner Meinung nach einfache CSS-Frage finden.

Die Zellen haben die angegebene Breite. Ich möchte jedoch nicht die Breite der Zeile angeben, die Breite sollte automatisch die Breite der untergeordneten Zellen sein.

Wenn das Ansichtsfenster zu schmal ist, um die Zeilen aufzunehmen, sollte das div mit Bildlaufleisten überlaufen.

Bitte geben Sie Ihre Antwort als Arbeitscode-Snippet an, da ich viele der Lösungen ausprobiert habe, die ich an anderer Stelle gesehen habe (z. B. Breite angeben: 100% und sie scheinen nicht zu funktionieren).

Ich suche eine reine HTML / CSS-Lösung, kein 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>
Erweitern Sie das Snippet

Im Moment ist es mir tatsächlich schwer, die Breite der Zeile auf eine wirklich große Zahl zu kodieren.

html  css-float  word-wrap 
— Nikolaus
quelle
1
Hat eine der folgenden Antworten für Sie funktioniert? Ich habe mit keinem von ihnen Erfolg.
— John Fitzpatrick
Ich habe nur alle Antworten ausprobiert und keine hat für mich funktioniert. Das Problem war, dass ich zwei schwebende linke Divs zentrieren musste, um zu verhindern, dass die rechte nach unten verschoben wird, nachdem die Fenstergröße geändert wurde.
— Bashevis
@Nicholas Ich denke, mein Beispiel ist genau das , wonach Sie suchen. Ich bin heute auf dasselbe Problem gestoßen . Die Dropdown-Menüs laufen über, aber die erste Ebene wird nicht umbrochen.
— John

Antworten:

106

Die CSS-Eigenschaft display: inline-blockwurde entwickelt, um diesen Bedarf zu decken. Sie können hier etwas darüber lesen: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Unten finden Sie ein Beispiel für die Verwendung. Die Schlüsselelemente sind, dass das rowElement hat white-space: nowrapund die cellElemente haben display: inline-block. Dieses Beispiel sollte in den meisten gängigen Browsern funktionieren. Eine Kompatibilitätstabelle finden Sie hier: 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
quelle
1
Fügen Sie <!DOCTYPE html>oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">oben im HTML hinzu, damit der IE nicht standardmäßig den Mackenmodus verwendet.
— Cees Timmerman
4
Hinweis: Ich hatte meine Zelltyp-Divs mit float: left eingerichtet, wodurch der berechnete Stil anstelle von Inline-Block blockiert wurde. Es hat eine Weile gedauert, um das herauszufinden, also dachte ich, es wäre am besten, das zu teilen.
— Steve Hibbert
Das funktioniert nicht mit der letzten Zelle, float: rightoder?
— Andy
3
Dies ist nicht wirklich ein Beispiel dafür, wie Sie verhindern können, dass schwebende Divs verpackt werden - Sie haben nur die Zellen entladen. Ich habe ein Layout mit einigen linken und rechten Floats, daher kann ich die Floats nicht abschaffen, um das Wrapping-Problem zu lösen.
— Andy
Haha, fair genug. Es ist eine pedantische Unterscheidung, aber Sie haben Recht. Ich habe "Stop Floated Divs from Wrapping" nicht gelöst, sondern die eigentliche Frage des Fragestellers "Wie mache ich mein Layout zum Laufen? ". Um das erstere zu beantworten: Ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, das Umwickeln von schwebenden Divs zu verhindern. Genau wie beim Fragesteller müssen Sie einen anderen Weg finden, um das von Ihnen beschriebene Layout zu codieren.
— Calvin
32

Sie möchten eine min-widthZeile definieren, damit der Browser bei einer Größenänderung nicht darunter liegt und umschließt.

— farooq
quelle
1
Dies würde sogar mit Schwimmern funktionieren. Ich denke, das ist die wahre Antwort.
— Danon
2
Stimmen Sie mit @Danon überein - dies funktioniert, während der Inline-Block Probleme mit der vertikalen Ausrichtung verursacht.
— Dlchambers
1
Kommt auf deine Bedürfnisse an. Dadurch wird verhindert, dass schwebende Divs umbrochen werden, wenn die Größe der Seite geändert wird. Der Fragesteller gab jedoch an, dass die Breite der Zeile nicht angegeben werden soll. Die Breite sollte automatisch der Breite der untergeordneten Zellen entsprechen. Die manuelle Breitenangabe erfordert einige doppelte Arbeiten, da Sie die Gesamtbreite der Zeile berechnen müssen. Schlimmer noch, wenn Ihre Zellen eine variable Breite haben (z. B. weil sie auf eine Textzeile in ihnen dimensioniert sind), kann die Berechnung der Gesamtsumme unpraktisch oder unmöglich sein.
— Calvin
-1; Dies widerspricht dem, was das OP in seiner Frage ausdrücklich angegeben hat, nämlich NICHT die Breite angeben zu müssen. +1 zu Calvins Kommentar oben.
— Teodor Sandu
4

Nachdem ich Johns Antwort gelesen hatte, stellte ich fest, dass Folgendes für uns zu funktionieren schien (keine Angabe der Breite erforderlich):

<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
quelle
Dies behebt ein Problem, das ich mit ziehbaren Divs auf dem iPhone hatte. Wenn die Divs mehr als ein Wort enthielten und sie an den Rand des Bildschirms gezogen wurden, wurde der Div so umbrochen, dass in jeder Zeile ein Wort stand. Jedenfalls overflow: visible; white-space: nowrap;hat der Trick für mich getan. Vielen Dank!
— TryHarder
4
Es funktionierte, weil er die Zellen nicht schwebte. Nicht wirklich eine Lösung, um tatsächlich schwebende Divs vom Wickeln abzuhalten
— Andy
1

Die einzige Möglichkeit, dies zu tun, ist die Verwendung von overflow: visible;und width: 20000px;für das übergeordnete Element. Mit CSS Level 1, das mir bekannt ist, gibt es keine Möglichkeit, dies zu tun, und ich habe mich geweigert zu glauben, ich müsste mit CSS Level 3 alles geben. Das folgende Beispiel enthält 18 Menüs, die über mein LCD mit einer Auflösung von 1920 x 1200 hinausgehen Wenn Ihr Bildschirm größer ist, duplizieren Sie einfach die Menüelemente der ersten Ebene oder ändern Sie einfach die Größe des Browsers. Alternativ und mit etwas geringerer Browserkompatibilität können Sie CSS3-Medienabfragen verwenden.

Hier ist eine vollständige Demonstration des Kopierens / Einfügens ...

<?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
quelle
Wenn ich die upvoted Antwort und Ersetzen width:100%mit width:1000pxihm funktioniert für mich
— Nick.McDermaid
@ Nick.McDermaid Ich habe aus einem bestimmten Grund 20K-Pixel verwendet. Wenn 4K-Bildschirme herauskommen, wissen Sie, dass es irgendwann 8K geben wird, und so weiter. Arbeiten Sie also am besten mit einer wahnsinnig hohen Zahl, damit es für diese zusätzlichen Jahre funktioniert, bis die Bildschirme höher sind -Lösung als das Leben selbst. ;-)
— John
Verstanden ... Ich bin nur froh, dass ich damit aufgehört habe zu wickeln. CSS-it macht mich selbst mit F12-Tools verrückt. Ich weiß nicht, wie jemand etwas ohne sie gemacht hat.
— Nick.McDermaid
1
Zum späteren Nachschlagen: Die Verwendung einer großen Breite / Höhe ist äußerst ineffizient, da der Browser immer noch eine nicht benötigte große Box im Speicher speichert. Stellen Sie den Container auf white-space: nowrap;und die Kinder auf ein, display: inline-block;wie bereits in anderen Antworten erwähnt (oder greifen Sie auf display: table;und zurück display: table-cell;).
— Gyo
main > * > * {background-color: #000;}O_o
— theflowersoftime
0

Für mich (mit Bootstrap) funktionierte nur die Einstellung display:absolute;z-index:1in der letzten Zelle.

— Spikolynn
quelle
1
display:absoluteist nicht gültig CSS
— caiosm1005
-1

Ich hatte ein ähnliches Problem, bei dem ein begrenzter Bereich aus einem Bild in einem Float bestand: dem linken Block und einem nicht-float-Textblock. Der Bereich hat eine Flüssigkeitsbreite. Der Text wird standardmäßig auf der rechten Seite des Bildes angezeigt. Das Problem war, dass der Text mit einem <h2> -Tag begann, dessen erstes Wort das winzige Wort "From" ist. Wenn ich das Fenster auf eine kleinere Breite verkleinerte, ließ der nicht schwebende Text für einen bestimmten Breitenbereich nur das Wort "Von" oben im Umbruchbereich, wobei der Rest des Textes unter dem Gleitkomma gedrückt wurde Block. Meine Lösung bestand darin, das erste Wort des Tags zu vergrößern, indem das darauf folgende Leerzeichen durch den folgenden Code ersetzt wurde: <span style = "opacity: 0;"> x </ span>. Der Effekt war, das erste Wort anstelle von "From", "FromxNextWord" zu machen. wo das "x", unsichtbar, wie ein Raum aussah. Jetzt war mein erstes Wort groß genug, um nicht vom Rest des Textblocks verlassen zu werden.

— Jim
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.