it-swarm.com.de

Div nur mit horizontalem Bildlauf

Ich habe eine DIV mit fester Breite, die eine Tabelle mit vielen Spalten enthält, und muss dem Benutzer ermöglichen, die Tabelle horizontal innerhalb der DIV zu scrollen.

Dies muss nur in IE6 und IE7 funktionieren (interne Client-Anwendung).

Folgendes funktioniert in IE7:

overflow-x: scroll;

Kann jemand mit einer Lösung helfen, die auch in IE6 funktioniert?

76
Richard Everett

Die Lösung ist ziemlich einfach. Um sicherzustellen, dass die Breite der Zellen in der Tabelle nicht beeinträchtigt wird, wird der Leerraum deaktiviert . Um sicherzustellen, dass eine horizontale Bildlaufleiste angezeigt wird, aktivieren Sie overflow-x . Und so ziemlich alles:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

Sie können das Endergebnis hier oder in der Animation unten sehen. Wenn die Tabelle die Höhe Ihres Containers bestimmt, müssen Sie overflow-y Nicht explizit auf hidden setzen. Aber verstehen Sie, dass dies auch eine Option ist.

enter image description here

146
Sampson

Ich konnte die ausgewählte Antwort nicht zum Laufen bringen, aber nach ein bisschen Nachforschungen fand ich heraus, dass das Div mit horizontalem Bildlauf white-space: nowrap In der CSS enthalten muss.

Hier ist der vollständige Arbeitscode:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>
65
W.K.S
overflow-x: scroll;
overflow-y: hidden;

BEARBEITEN:

Für mich geht das:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

Beachten Sie beim horizontalen Scrollen die folgenden beiden Eigenschaften:

overflow-x:scroll;
white-space: nowrap;

Siehe Arbeitslink: klick mich an

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
17
ankitd

versuche dies:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

Der weiße Raum: nowrap; In der Eigenschaft können Sie keinen Text umbrechen. Ein Beispiel finden Sie hier: https://codepen.io/oezkany/pen/YoVgYK

1
oezkany