Frage Stoppen Sie schwimmende divs vom Wrapping


Ich möchte eine Reihe von divs (Zellen) haben, die nicht umgebrochen werden, wenn der Browser zu schmal ist, um zu ihnen zu passen.

Ich habe Stack durchsucht und konnte keine funktionierende Antwort finden, die meiner Meinung nach eine einfache CSS-Frage sein sollte.

Die Zellen haben eine festgelegte Breite. Allerdings möchte ich 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 (wie Breite angeben: 100% und sie scheinen nicht zu funktionieren).

Ich suche nach einer HTML / CSS-Lösung, ohne 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>

Im Moment bin ich wirklich hart die Breite der Reihe zu einer wirklich großen Zahl zu kodieren.


75
2018-04-11 02:56


Ursprung


Antworten:


Die CSS-Eigenschaft display: inline-block wurde entwickelt, um dieses Bedürfnis zu adressieren. Sie können hier ein wenig darüber lesen: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Unten ist ein Beispiel für seine Verwendung. Die Schlüsselelemente sind, dass die row Element hat white-space: nowrap und das cell Elemente haben display: inline-block. Dieses Beispiel sollte in den meisten gängigen Browsern funktionieren. Eine Kompatibilitätstabelle ist hier verfügbar: 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>

99
2018-06-13 01:11



Sie möchten definieren min-width in der Reihe, wenn der Browser neu skaliert wird, wird er nicht darunter und umgebrochen.


28
2017-07-09 22:29



Nachdem ich Johns Antwort gelesen hatte, stellte ich fest, dass das Folgende 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>

3
2017-10-31 14:58



Die einzige Möglichkeit, dies zu erreichen, ist die Verwendung von overflow: visible; und width: 20000px; auf dem Elternelement. Es gibt keine Möglichkeit, dies mit der CSS-Stufe 1 zu tun, die mir bewusst ist, und ich wollte nicht, dass ich mit CSS-Level 3 alles durchgehen müsste. Das folgende Beispiel hat 18 Menüs, die über meine 1920x1200 Auflösung hinausgehen Wenn der 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 Demo zum Kopieren / Einfügen ...

<?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>

0
2017-09-20 17:55



Für mich (mit Bootstrap) war nur das, was funktionierte, Einstellung display:absolute;z-index:1 auf der letzte Zelle.


0
2018-02-01 19:24



Ich hatte ein etwas ähnliches Problem, bei dem ein begrenzter Bereich aus einem Bild in einem Gleitkomma bestand: linker Block und nicht floatender Textblock. Der Bereich hat eine Flüssigkeitsbreite. Der Text würde von vornherein auf der rechten Seite des Bildes enden. Das Problem war, dass der Text mit einem <h2> -Tag begann, dessen erstes Wort das kleine Wort "From" ist. Wenn ich das Fenster auf eine kleinere Breite änderte, würde der nicht schwebende Text für einen bestimmten Bereich von Breiten nur das Wort "Von" am oberen Ende des Umwicklungsbereichs belassen, während der Rest des Textes unter dem Schwebekörper gequetscht wurde Block. Meine Lösung bestand darin, das erste Wort des Tags größer zu machen, indem ich den folgenden Platz durch diesen Code ersetzte: <span style = "opacity: 0;"> x </ span>. Der Effekt war, das erste Wort zu machen, anstelle von "From", "FromxNextWord", wo das "x", das unsichtbar war, wie ein Raum aussah. Jetzt war mein erstes Wort groß genug, um nicht vom Rest des Textblocks aufgegeben zu werden.


-1
2018-05-11 00:06