Problem mit der Ausrichtung (js Geige)

Question

Daher möchte ich mehrere Divs nebeneinander ausrichten (horizontal zentriert). Wenn es mehr als n Divs gibt, sollte der Container, in dem sich die Divs befinden, wie eine einfache Bildlaufleiste in x-Richtung scrollbar sein, um Folgendes zu erhalten:

Image #1

Image #2

Image #3

Hinweis : Wäre jemand so freundlich, das (!) vor den Bildern hinzuzufügen?

Allerdings - ich konnte es mit diesem Code bisher nicht zum Laufen bringen:

#container {
  position: relative;
  width: 80%;
  height: 40%;
  overflow-x: scroll;
  background: gray;
}

.item {
  position: absolute;
  width: 10%;
  height: 80%;
  background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin: auto;
  top: 0;
  bottom: 0;
  background-size: contain;
}

#bigContainer {
  position: absolute;
  width: 100%;
  height: 50%;
  background: white;
  bottom: 0%;
  border-radius: 15px 15px 0px 0px
}

<div id="bigContainer">

    <div id="container">

      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>

    </div>


</div>

Hinweis : Es scheint, dass Stackoverflow derzeit für mich kaputt ist, daher gibt es die Geige zum Testen des Codes: https://jsfiddle.net/nfdgyx73/13/

Hinweis : Es wäre cool, eine Lösung bereitzustellen, bei der ich keine massiven Änderungen an den Containern vornehmen muss (insbesondere, um deren Positionsattribute nicht zu ändern).

Jede Hilfe wäre sehr dankbar, danke eine Million im Voraus!

javascript html css

1

user9659910 17 Apr. 2018 im 19:56

Answer 1

Suchen Sie so etwas? Ich habe auch fiddle aktualisiert: https://jsfiddle.net/nfdgyx73/40/

Sie müssen nur die Elemente inline anzeigen (display: inline-block) und sicherstellen, dass Sie Ihren Container nicht einwickeln, da er ein% zur Berechnung der Breite verwendet (white-space: nowrap) und keinen Überlauf für den eingeschalteten Container sicherstellt y-Achse (overflow-y: hidden)

Gemäß Ihrem Kommentar habe ich der Container-ID auch text-align: center hinzugefügt. Wenn also weniger Elemente vorhanden sind, für die kein Bildlauf erforderlich ist, werden sie zentriert.

#container {
  position: relative;
  width: 80%;
  height: 40%;
  overflow-x: scroll;
  background: gray;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
}

.item {
  display: inline-block;
  width: 10%;
  height: 80%;
  background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin: 4px;
  top: 0;
  bottom: 0;
  background-size: contain;
}

#bigContainer {
  position: absolute;
  width: 100%;
  height: 50%;
  background: white;
  bottom: 0%;
  border-radius: 15px 15px 0px 0px
}

<div id="bigContainer">

  <div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>


</div>

0

Woodrow 17 Apr. 2018 im 18:56

Answer 2

Wenn position: absolute; nicht erforderlich ist, kann dies mit Flexboxen erfolgen

#container {
  display: flex;
  justify-content: center;
  width: -webkit-fit-available;
  padding: 20px;
  background: gray;
}

#container .item {
  margin-right: 10px;
}

#container .item:last-child {
  margin-right: 0;
}

.item {
  width: 25px;
  height: 25px;
  background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

#bigContainer {
  display: flex;
  width: 80%;
  background: white;
  overflow-x: auto;
  border-radius: 15px 15px 0px 0px;
  margin-bottom: 20px; /* This is just to help differentiate the two bigContainers */
}

<div id="bigContainer">
    <div id="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
</div>

<div id="bigContainer">
    <div id="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
</div>

0

Chimera.Zen 17 Apr. 2018 im 19:44

Answer 3

Meine Lösung verwendet eine Flexbox, um alle Elemente wie gewünscht auszurichten. Wenn mehr Elemente vorhanden sind als Platz vorhanden ist, wird eine Bildlaufleiste hinzugefügt (kommentieren Sie die zusätzlichen Divs aus, um sie in Aktion zu sehen).

https://jsfiddle.net/nfdgyx73/58/

#container {
  position: relative;
  width: 80%;
  height: 40%;
  overflow-x: scroll;
  background: gray;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

#container::before, #container::after {
  content: '';
  margin: auto;
}

.item {
  width: 10%;
  height: 80%;
  background: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: 0 5px;
  flex-shrink: 0;
}


#bigContainer {
  position: absolute;
  width: 100%;
  height: 50%;
  background: white;
  bottom: 0%;
  border-radius: 15px 15px 0px 0px
}

<div id="bigContainer">

  <div id="container">

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <!-- <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div> -->

  </div>


</div>

0

Ghostrydr 17 Apr. 2018 im 19:03

Problem mit der Ausrichtung (js Geige)

3 Antworten

Verwandte Fragen

Neue Fragen