Question

我遇到5个div元素的问题，以使其响应。

我有这样的div元素：

<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

这样的样式CSS：

.AllCont {
  display: table;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
  display: table-cell;
  width: 20%;
}

尝试在CSS中对此做出响应：

@media only screen and (max-width:1540px) {
.ContQuint {
    display: table-row;
  }
}

但我不想要那个。我想要这样的东西：

| Elem 1 - Elem 2 - Elem 3 - Elem 4 - Elem 5 |

然后当屏幕尺寸稍微减小时我想要这个：

| Elem 1 - Elem 2 - Elem 3 - Elem 4 |

| Elem 5 |

然后当减少更多：

| Elem 1 - Elem 2 - Elem 3 |

| Elem 4 - Elem 5 |

然后多一点：

| Elem1 - Elem 2 |

| Elem 3 - Elem 4 |

| Elem 5 |

最后：

| Elem 1 |

| Elem 2 |

| Elem 3 |

| Elem 4 |

| Elem 5 |

我怎么能用CSS或javascript做到这一点？

Answer 1

我认为您正在寻找的是display: inline-block;！在父display: block元素上加.AllCont。表格曾经对这种布局很有用，但是现在您可以更好地检查flexbox（甚至是CSS grid）更复杂的内容。

Answer 2

如果可能需要考虑响应式布局，这将有助于您了解不同的模式。

Responsive patterns by google

无论哪种方式，我建议使用flexboxes或inline / block元素。

使用flexboxes的解决方案：

.AllCont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
    width: 200px;
}

<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

使用内联和块元素的解决方案

.AllCont {
  display: block;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
  display: inline-block;
    width: 200px;
}

<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

希望这会有所帮助：）

Answer 3

不是给.ContQuint赋予％宽度，而是给出固定的宽度。否则宽度会随着屏幕宽度而减小。

fiddle showing it

.ContQuint {
  display: inline-block;
  width: 150px;
}

Answer 4

Flexbox使用flex-wrap: wrap;

执行此操作

.AllCont {
  display: flex;
  flex-wrap: wrap;
}
.ContQuint {

}

<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

Answer 5

您可以使用flex，width + flex-wrap和min-width来取消媒体曝光。

＆＃13;

.AllCont {
  display: flex;
  flex-wrap: wrap;
}
.ContQuint {
  width: 20%;
  /* optionnal*/
  min-width: 300px;/* this is alike your breaking point ... each 300px or else value you set */
  padding: 1px;
  box-sizing:border-box;
}
img {
  /* optionnal*/
  display: block;
  width: 100%;
}

＆＃13;

<div class="AllCont">
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200">
    </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
</div>

＆＃13;

pen to play with

响应5 div元素CSS，一个接一个

5 个答案: