图像未正确对齐的网格布局

Question

我正在尝试学习如何使用图像制作响应式网格布局。我觉得我快到了，但我在对齐方面遇到了一些问题。首先，为了让事情更容易理解，我制作了我想要实现的目标的模型：

（网格将用于显示图像/帖子。我希望能够混合和匹配它们。）

到目前为止我所取得的成就的屏幕截图：

但是当我在网格中添加一个 med-box 时，我遇到了对齐问题。如您在此处看到的： （MED-BOX的高度略高于SML-BOX，SML-BOX没有对齐。）

当我在带有 MED-BOX 的列下添加另一个 3 x SML-BOX 时，我也遇到了这个问题：

我认为这与我的“med-box”的 % 宽度有关（请参见下面的代码），但我尝试调整宽度百分比但无法正常工作！我遇到的另一个问题是当我进入移动宽度时，左侧的边距关闭，我不知道为什么。请在下面或 JsFiddle 上查看我的代码：https://jsfiddle.net/shiggydoodah/z0og70wn/

我已经坚持了一段时间了，我真的需要一些专家的建议。如果有人知道如何解决这个问题，如果可以与我分享，将不胜感激。

非常感谢

路易

section {
  width: 80%;
  margin: 20px auto;
  line-height: 1.5em;
  font-size: 0.9em;
  padding: 30px;
  color: black;
  border: 4px solid red;
  overflow: hidden;
}
.row {
  margin: 0 auto;
  width: 100%;
}
.col {
  min-height: 40px;
  margin-left: 1%;
  margin-right: 1%;
  margin: top 1%;
  margin-bottom: 1%;
  display: inline-block;
  float: left;
}
.col:first-child {
  margin-left: 0px !important;
}
.col:last-child {
  margin-right: 0px !important;
}
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  padding: 0;
}
.col.lrg {
  width: 100%;
}
.col.sml {
  width: 32%;
}
.col.med {
  width: 65%;
  padding: 0;
}
@media (max-width: 766px) {
  col {
    width: 90% !important;
    margin: 10px auto !important;
    padding: 0;
  }
  .col.lrg {
    width: 100%;
    height: auto;
  }
  .col.sml {
    width: 100%;
    height: auto;
  }
  .col.med {
    width: 100%;
    height: auto;
  }
}

<section>


  <div class="row">
    <div class="col lrg">
      <img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
    </div>
  </div>

  <div class="row">
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
  </div>

  <div class="row">
    <div class="col med">
      <img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
    </div>
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
  </div>

  <div class="row">
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
    <div class="col sml">
      <img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
    </div>
  </div>

</section>

Answer 1

当您在其中有浮动元素和overflow: hidden 时，您必须清除每一行，以便它可以填充高度。

.row
{ 
clear:both;
overflow: hidden;
}

Answer 2

这个问题是由于您的 MED-BOX 图像的比例造成的。

您应该对 .row css 属性进行一些修改，对其进行一些修改。

.row {
    margin: 0 auto 15px;
    width: 100%;
    max-height: 455px;
    overflow: hidden;
}

我同样为每行添加一个底部边距，因为溢出隐藏行为会导致 .col 底部边距属性被行溢出隐藏。

Answer 3

首先，您使用网格的方式存在一些问题。每当您浮动一个元素时，您基本上都会从文档流中删除该元素。这意味着后续元素将不知道如何在事物的自然流动中定位自己。您需要确保使用 clear 来抵消浮动的影响。

另外，medium 元素需要设置为 66% 的宽度，以说明您的小列类的左右边距。请看edited fiddle

CSS：

.col.med {
  width: 66%;
  padding: 0;
}

我还为你的行类添加了一个 clear：

.row::after {
  content: "";
  display: table;
  clear: both;
}

我还删除了您实现的!important 语句的使用。这是一个非常糟糕的做法，如果您正确使用继承和 CSS 的自然级联性质，那么您将不需要显式尝试使用此方法覆盖任何内容。