Question

我正在制作动画网络漫画，为此我将制作一些不同宽度的动画视频。我的目标是将视频放入两列网格中，如下所示：http://imgur.com/meSTU1u。

我目前正在使用图片而不是视频，只是为了查看它是否能正常工作。

我使用flexbox尝试过它：https://jsfiddle.net/3zacce6e/5/

使用此标记：

{{1}}

当你看到视口宽度至少为934px的网格布局时（这是最大的图像加上每边的7px边距），这看起来就像我想要的那样。然后图像在680px的断点处堆叠在一起，这也是我想要的。

我唯一的问题是视口宽度介于680px和934px之间。我希望两列布局能够响应这些宽度，并根据视口宽度调低两列网格大小。

有没有办法实现我想要的？我觉得我错过了一些非常简单的事情......

非常感谢你的帮助！

Answer 1

我只想为每个实际行创建行并生成flex。并且将图像包装在div中，因为图像像柔性儿童一样伸展并且反应奇怪。

＆＃13;

.wrapper {
  margin: 0 3vw;
}

.container {
  max-width: 1000px;
  margin: auto;
}

.container-video {
  max-width: 100%;
  display: block;
}

.row {
  display: flex;
}

.row > div {
  padding: 10px;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/600x250">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/300x250">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/920x300">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/450x250">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/450x250">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/300x300">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/250x300">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/330x300">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/920x350">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/600x250">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/300x250">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以通过多种方式获得结果。其中之一是将Media queries添加到您的css中，以便在宽度之间重新定位。简短的例子：

@media screen and (min-width: 680px) and (max-width: 934px) {
   /* Extra CSS for styling the video's. */
   /* Example
     img.container-video {
      width: 50%;
}
}

实现目标的第二个示例是使用bootstrap columns 见下面的例子：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <!-- img -->
        </div>
        <div class="col-lg-4">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <!-- img -->
        </div>
        <div class="col-lg-6">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <!-- img -->
        </div>
        <div class="col-lg-8">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-7">
            <!-- img -->
        </div>
        <div class="col-lg-5">
            <!-- img -->
        </div>
    </div>
</div>

有关bootstrap的更多信息：more

希望它有帮助！

Answer 3

使用src属性选择img标记的额外断点的示例：

＆＃13;

.wrapper {
  margin: 0 3vw;
}

.flex-container {
  max-width: 1000px;
  padding: 0;
  margin: auto;
  display: block;
  height: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
}

.container-video {
  margin: 10px;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1018px) {
  .container-video {
    margin: auto auto 20px;
    max-width: 98%;
  }
  .container-video[src*="/600"] {
    max-width: 63%;
  }
  .container-video[src*="/450"] {
    max-width: 48%;
  }
  .container-video[src*="/300"] {
    max-width: 31%;
  }
  .container-video[src*="/330"] {
    max-width: 33%;
  }
  .container-video[src*="/250"] {
    max-width: 23%;
  }
}

@media (max-width: 680px) {
  .container-video[src*="/"] {
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0 0 20px;
  }
}

＆＃13;

<div class="wrapper">
  <div class="flex-container">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
    <img class="container-video" src="http://placehold.it/920x300">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/300x300">
    <img class="container-video" src="http://placehold.it/250x300">
    <img class="container-video" src="http://placehold.it/330x300">
    <img class="container-video" src="http://placehold.it/920x350">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
  </div>
</div>

＆＃13;

这种结构很容易，因为可以从src uri本身轻松检索大小。

另一种方法可能是通过order对它们进行重新排序，只调整其中一些，或者将它们全部调整为最大宽度：xx％

＆＃13;

  .wrapper {
  margin: 0 3vw;
}

.flex-container {
  max-width: 1000px;
  padding: 0;
  margin: auto;
  display: block;
  height: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
}

.container-video {
  margin: 10px;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1018px) {
  .container-video {
    margin: auto;
    border: 5px solid transparent;
    box-sizing: border-box;
    max-width: 45%;
  }
  @media (max-width: 680px) {
    .container-video[src*="/"] {
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin: 0 0 20px;
    }
  }

＆＃13;

<div class="wrapper">
  <div class="flex-container">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
    <img class="container-video" src="http://placehold.it/920x300">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/300x300">
    <img class="container-video" src="http://placehold.it/250x300">
    <img class="container-video" src="http://placehold.it/330x300">
    <img class="container-video" src="http://placehold.it/920x350">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
  </div>
</div>

＆＃13;

适用于年轻浏览器，您可以使用grid CSS

＆＃13;

.wrapper {
  margin: 0 3vw;
}

.flex-container {
  max-width: 1000px;
  padding: 0;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap:10px;
}


.container-video {
 margin:10px auto;
 width:100%;

}

.container-video[src*="/920"] {
  grid-column: auto / span 18;
}

.container-video[src*="/600"] {
  grid-column: auto / span 12;
}

.container-video[src*="/450"] {
  grid-column: auto / span 9;
}

.container-video[src*="/300"] {
  grid-column: auto / span 6;
}

.container-video[src*="/330"] {
  grid-column: auto/ span 7;
}

.container-video[src*="/250"] {
  grid-column: auto/ span 4;
}


}
@media (max-width: 680px) {
  .flex-container {
    display: block
  }
  
  .container-video {
    margin: 5px;
  }
}

＆＃13;

<div class="wrapper">

  <div class="flex-container">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
    <img class="container-video" src="http://placehold.it/920x300">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/300x300">
    <img class="container-video" src="http://placehold.it/250x300">
    <img class="container-video" src="http://placehold.it/330x300">
    <img class="container-video" src="http://placehold.it/920x350">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
  </div>
</div>

＆＃13;

响应两列网格

3 个答案: