Сложно сделать сложенные div-ы отзывчивыми - PullRequest
Новая
       34

Сложно сделать сложенные div-ы отзывчивыми

0 голосов
/ 11 октября 2018 

.container{
  border: 1px solid black;
  width: 13em;
  
}
.animal:nth-child(n+2){
  margin-left: -5em;
}
.animal{
  width: 6em;
  height:6em;
  display: inline-block;
  background: yellow;
  border: 1px solid black;
  border-radius: 6px;
}

.container2{
  border: 1px solid black;
  width: 14em;
  height: 120px;
}

.animal1,.animal2,.animal3,.animal4,.animal5,.animal6,.animal7,.animal8{
  width: 6em;
  height: 6em;
  background: yellow;
  border: 1px solid black;
  border-radius: 6px;
  display: inline-block;
}

.animal1{
  position: absolute;
  left: 1em;
}
.animal2{
  position: absolute;
  left: 3em;
}
.animal3{
  position: absolute;
  left: 6em;
}
.animal4{
  position: absolute;
  left: 9em;
}
.animal5{
  position: absolute;
  left: 12em;
}
.animal6{
  position: absolute;
  left: 15em;
}
.animal7{
  position: absolute;
  left: 18em;
}
.animal8{
  position: absolute;
  left: 21em;
}
<html>
  <body>
    <h2>Case1</h2>
    <div class="container">
      <div class="animal">Dog</div>
      <div class="animal">Cat</div>
      <div class="animal">Mouse</div>
      <div class="animal">Duck</div>
      <div class="animal">Fish</div>
      <div class="animal">Fish</div>
      <div class="animal">Fish</div>
      <div class="animal">Fish</div>
      <div class="animal">Mouse</div>
      <div class="animal">Cat</div>
    </div>
    <br><br>
    <h2>Case2</h2>
    <div class="container2">
      <div class="animal1">Dog</div>
      <div class="animal2">Cat</div>
      <div class="animal3">Mouse</div>
      <div class="animal4">Duck</div>
      <div class="animal5">Fish</div>
      <div class="animal6">Fish</div>
      <div class="animal7">Fish</div>
      <div class="animal8">Fish</div>
    </div>
  </body>
</html>

Есть несколько элементов div, которые накладываются друг на друга.Я реализую стек двумя способами: (1) отрицательное поле и (2) положение: абсолютное с приращением влево.Однако, если я использую отрицательное поле, div во второй строке будет переполнен.Если я использую position: absolute, когда контейнер маленький, элементы div также будут переполнены.Как я могу сделать сложенные div-ы отзывчивыми?Могу ли я сделать его отзывчивым на 100 делений?

1 Ответ

0 голосов
/ 11 октября 2018

Решение CSS-Grid может работать для вас. 

.container {
  border: 1px solid black;
  width: 13em;
  display: grid;
  grid-template-columns: repeat(4, 2em); /* Tweak me! */
}

/* A random media query */
@media (min-width: 1200px) {
  .container {
    width: 26em;
    grid-template-columns: repeat(8, 2em);
  }
}

.animal {
  width: 6em;
  height: 6em;
  display: inline-block;
  background: yellow;
  border: 1px solid black;
  border-radius: 6px;
}
<div class="container">
  <div class="animal">Dog</div>
  <div class="animal">Cat</div>
  <div class="animal">Mouse</div>
  <div class="animal">Duck</div>
  <div class="animal">Fish</div>
  <div class="animal">Fish</div>
  <div class="animal">Fish</div>
  <div class="animal">Fish</div>
  <div class="animal">Mouse</div>
  <div class="animal">Cat</div>
</div>

Настройка grid-template-columns в соответствии с вашими потребностями.

Чтобы быстро реагировать, просто измените его в своих медиазапросах.Я продемонстрировал это в примере выше.

...