Question

我正在我的投资组合网站和项目页面上工作，我正在使用Foundation 5的行和列来显示大图像和标题框。对于具有多个图像和标题的项目，我交替布局。

这是桌面布局：
[标题] [大图]
[大图] [标题]
[标题] [大图]

移动布局是这样渲染的（这很有意义）：
[标题]
[大图]
[大图]
[标题]
[标题]
[大图]

一旦屏幕尺寸低于1025px，我真的希望图像显示在字幕上方。我已经尝试将新的浮点数应用到列中，我尝试过基金会的推/拉类，但没有任何效果。我认为解决方案很可能需要jQuery，但我无法使用浮动来覆盖Foundation的布局。

以下是我正在使用的代码：

<div class="row">
<div class="caption small-11 medium-8 large-4 small-centered medium-centered large-uncentered c   olumn">Caption</div>
<div class="large_image medium-10 large-8 medium-centered large-uncentered column">Large Image</div>    
</div>

<div class="row">
<div class="large_image medium-10 large-8 medium-centered large-uncentered column">Large Image</div>
<div class="caption small-11 medium-8 large-4 small-centered medium-centered large-uncentered c   olumn">Caption</div>    
</div>

<div class="row">
<div class="caption small-11 medium-8 large-4 small-centered medium-centered large-uncentered c   olumn">Caption</div>
<div class="large_image medium-10 large-8 medium-centered large-uncentered column">Large Image</div>    
</div>

非常感谢任何帮助。

Answer 1

您可以使用mediaqueries并显示：flex;或伪元素以及浮动和清除方法。

display：flex + mediaqueries http://codepen.io/anon/pen/unfgB

body {
  margin:0;
}
.row {
  overflow:hidden;
  width:100%;
  display:flex;
}
* {
  box-sizing:border-box;/*to show borders */
}
.caption,
.large_image {
  border:solid;
  overflow:hidden;
}
.caption {
  width:30%;
}
.large_image {
  width:70%;
  min-width:500px;
}

@media screen and (max-width: 714px) { /* based on large_image at min-width 500px and caption at 30% width */
  .row{
    flex-direction: column;
  }
  .caption {
    order:1;
  }
  .large_image {
    order:2;
  }


}

或浮动和伪方法 http://codepen.io/anon/pen/lEdmH

body {
  margin:0;
}
.row {
  overflow:hidden;
  width:100%;
}
* {
  box-sizing:border-box;/*to show borders */
}
.caption,
.large_image {
  border:solid;
  overflow:hidden;
}
.caption {
  width:30%;
}
.large_image {
  width:70%;
  min-width:500px;
}
.row :nth-child(1) {
  float:left;
}
@media screen and (max-width: 714px) { /* based on large_image at min-width 500px and caption at 30% width */
  .large_image {
    clear:left;
  }

.row:before {
  content:'';
  float:left;
  height:1.6em;/* this should be height of caption */
}
}

边距，盒子大小和宽度都是用于测试目的。

在这两种情况下都使用了mediaquerie，但是在javascript或Jquery中你可以检查它并将一个额外的类应用于.row并保留这两个测试中使用的一个或另一个CSS。

Answer 2

如果您使用的是表示类，则应尝试使用推/拉类。这是违反直觉的，但我会尝试解释它。

您应该按照希望它们在Mobile / Small中显示的顺序放置列。此外，媒体网格从小/移动网格继承其大小，但是，它继承了大网格中的推/拉类。

考虑到这两件事，你可以修改你的东西：

<div class="row">
  <div class="large_image medium-8 large-8 push-4 column"><img src="http://www.placehold.it/300x300" alt=""></div>    
  <div class="caption medium-4 large-4 pull-8 column">Caption</div>
</div>

<div class="row">
  <div class="large_image medium-8 large-8 column"><img src="http://www.placehold.it/300x300" alt=""></div>
  <div class="caption medium-4 large-4 column">Caption</div>
</div>

<div class="row">
  <div class="large_image medium-8 large-8 push-4 column"><img src="http://www.placehold.it/300x300" alt=""></div>    
  <div class="caption medium-4 large-4 pull-8 column">Caption</div>
</div>

我在小型11中小型未经中性的大型未经处理的治疗中展示了这一点，以便更清楚地展示推/拉类的工作原理。

希望有所帮助。

如果您坚持让媒体网格更接近移动网格的想法，您可以更改默认媒体查询范围，以有效地使移动网格也包含平板电脑范围，或者您必须编写自定义CSS / Scss媒体查询，例如上一个答案。

为Mobile Foundation 5重新排序列

2 个答案: