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

Question

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

（网格将用于显示images/posts。我希望能够混合搭配它们。）

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

但是当我在网格中添加一个医疗盒时，我遇到了对齐问题。如您所见： （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

此问题是由于您的 MED-BOX 图片的比例问题造成的。

您应该通过对 .row css 属性进行一些修改来裁剪它。

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

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

Answer 2

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

此外，需要将中等元素的宽度设置为 66%，以考虑到小列左侧和右侧的边距 class。请参阅 edited fiddle

CSS:

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

我也为你的行添加了一个清除 class:

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

我还删除了您已实现的 !important 语句的使用。这是一个非常糟糕的做法，就好像您正确地使用了继承和 CSS 的自然级联性质，那么您将不需要明确地尝试使用此方法覆盖任何东西。

Answer 3

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

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

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

Grid layout with images not aligning properly

html

css

grid-layout

responsive-design