Question

我想制作一个包含以下要求的浮动divs的网页：

divs水平堆叠，然后垂直堆叠。
divs始终填满整个屏幕。
在某个时间间隔内，水平行上divs的数量会发生变化

示例场景：屏幕宽度为100px时：divs的垂直堆栈，大小为100px x 100px。当屏幕宽度为200px时：每行包含2 divs大小为100px x 100px的堆栈。屏幕宽度在100px and 200px之间：用于填充整个屏幕的divs自动缩放以及每行保留2 divs。

我已经尝试过尝试满足这些要求，但我还没有破解解决方案。这就是我到目前为止所拥有的。问题主要是缩放部分。

<div class="container">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
</div>

CSS代码：

.container {
    width: 100%;
}

.image {
    display: inline-block;
    float: left;
    margin-left: 10px;
}

img {
  width: 100px;
  height: 100px;
}


@media (max-width: 100px) {
.image {
   width:10%   
  }
}

@media (min-width:101px) and (max-width: 200px){
    .image {
   width:20%
  }
}

Answer 1

通过一些更改，这可能就是您要查找的内容，但100px和200px的视图只是一个非常小的视图。

段

＆＃13;

.container {
  width: 100%;
}
.image {
  float: left;
  margin-left: 1%;
}
img {
  max-width: 100%;
  height:auto;
}

@media (min-width: 101px) and (max-width: 200px) {
  .image {
    max-width: 49%
  }
}
@media (max-width: 100px) {
  .image  {
    float:none;
    max-width:100%
  }

＆＃13;

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
</div>

＆＃13;

每隔一段时间缩放浮动div

1 个答案:

段