Html 响应式双柱网

我正在制作一部动画网络漫画，为此我将制作一些不同宽度的动画视频。我的目标是将视频放在一个两列的网格中，看起来像这样：

我目前正在用图像而不是视频来制作它，只是想看看它是否能工作

我已经使用flexbox进行了尝试：

使用此标记：

<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>

当您查看视口宽度至少为934px（最大的图像加上每侧的7px边距）的栅格布局时，这看起来正是我想要的方式。然后图像以680px的断点相互堆叠，这也是我想要的

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

有什么方法可以实现我想要的吗？我觉得我错过了一些非常简单的事情

---

我非常感谢你的帮助

你可以通过多种方式实现你的目标。其中一种方法是向css中添加

媒体查询

，以便在宽度之间重新排序。简短示例：

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

实现目标的第二个示例是使用

引导列

请参见下面的示例：

<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>

有关引导的更多信息：

---

希望有帮助

我只需要为每个实际行创建行，并使其成为flex。并将图像包装在一个div中，因为flex儿童的图像拉伸和响应怪异

.wrapper{
利润率：0.3vw；
}
.集装箱{
最大宽度：1000px；
保证金：自动；
}
.集装箱视频{
最大宽度：100%；
显示：块；
}
.行{
显示器：flex；
}
.行>分区{
填充：10px；
}

---

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

.wrapper{
利润率：0.3vw；
}
.柔性容器{
最大宽度：1000px；
填充：0；
保证金：自动；
显示：块；
高度：自动；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
-moz-flex-flow：行换行；
-ms flex流：行换行；
柔性流：行换行；
-webkit盒包：中心；
-莫兹盒包装：中心；
盒式包装：中间；
证明内容：中心；
}
.集装箱视频{
利润率：10px；
最大宽度：100%；
最大高度：100%；
}
@介质（最大宽度：1018px）{
.集装箱视频{
保证金：自动20px；
最大宽度：98%；
}
.container视频[src*=“/600”]{
最大宽度：63%；
}
.container视频[src*=“/450”]{
最大宽度：48%；
}
.container视频[src*=“/300”]{
最大宽度：31%；
}
.container视频[src*=“/330”]{
最大宽度：33%；
}
.container视频[src*=“/250”]{
最大宽度：23%；
}
}
@介质（最大宽度：680px）{
.container视频[src*=“/”]{
最大宽度：100%；
宽度：100%；
身高：100%；
利润率：0.20px；
}
}

非常感谢，这看起来很完美！我现在唯一的问题是，让图像堆叠在彼此下面的媒体查询不再有效（请参阅此处：）。我是否需要使用与.container视频不同的选择器？先生，您是我最喜欢的人！这正是我想要的。非常感谢你，我感谢你的帮助！还有最后一件事我想知道。是否不可能创建这样的东西：使用我在上面使用的标记？如果一行中有三个图像，它们会自动堆叠在一起，如下所示：。我猜右边的两个图像不可能互相堆叠在一起？所以它确实有效！我已经试着这么久了。非常感谢你！我意识到现在媒体查询已经不起作用了。有没有办法解决这个问题？这很奇怪，我刚刚意识到，当我将以前的代码用于其他媒体查询时，它确实可以工作，而使用JSFIDLE则无法工作。但你的解决方案也同样有效！这是我最后一个问题，非常感谢你的帮助！