Question

我正在尝试学习如何使用图像制作响应式网格布局。我觉得我几乎在那里，但我有一些对齐的问题。首先，为了让事情更容易理解，我已经模拟了我想要实现的目标：

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

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

但是当我向网格添加一个med-box时，我有对齐问题。你可以在这里看到： （MED-BOX的高度略高于SML-box，SML-BOX没有正确对齐。）

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

我认为这与我的＆＃34; med-box＆＃34;的宽度有关。（见下面的代码），但我已经尝试调整宽度百分比，不能让它工作！我遇到的另一个问题是当我进入移动宽度时，左边的边距是关闭的，我不知道为什么。请查看下面的代码或JsFiddle上的代码：https://jsfiddle.net/shiggydoodah/z0og70wn/

我现在已经坚持了一段时间，我真的需要一些专家建议。如果有人知道如何解决这个问题，我将非常感谢能与我分享。

非常感谢

路易斯

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

您应该在.row css属性上进行一些修改后对其进行裁剪。

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

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

Answer 2

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

另外，中间元素需要设置为66％宽度，以考虑小列类左侧和右侧的边距。请参阅edited fiddle

CSS：

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

我还在你的行类中添加了一个明确的内容：

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

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

Answer 3

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

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

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

3 个答案: