Question

我正在努力应对响应式设计，其中容器应装满每行3个盒子的盒子。 2个方格和1个16：9，所有三个都具有相同的高度（所以第四个框也应该自动成为下一行的第一个），其间有5px空间。

一开始感觉很简单，但我找不到一个简单的方法来完成这项工作！？有任何想法吗！？谢谢！

Answer 1

对于16：9框，您可以通过填充建立高度。这是有效的，因为填充顶部和填充底部是由元素的宽度建立的。

div.sixteen_nine_box{
  height:0;
  /* 9 / 16 = 56.25 */
  padding-top: 56.25%;

}

所以这里发生的是依赖于分配给你的盒子的宽度（上下文，你的行），高度总是56.25％，或宽度的9/16。

现在要确保每行所有三个元素的高度相同，您应该注意到矩形比每个框宽7/16（43.75％）。因此，如果矩形的宽度是16：16的16，则框的宽度为9。使所有三个34个单元（16 + 9 + 9）的总宽度。因此，为每个元素留下宽度（如果你包括任何内容，则为+余量）：

- 矩形：16/34 =总行数的47.05％

- 平方：9/34 =总行数的26.47％

或者，对于更加预先构建的解决方案。您可以使用boostrap embed classes。您不必在其中嵌入媒体，它们将保留文本，其他元素等的宽高比。

Answer 2

如果容器有完整的窗口宽度，您可以使用calc和vw单位，就像我在下面的第一个代码段中一样：我计算出宽度必须是9/16/9的比例总和是容器宽度，并且2倍5px边距减去10px，因此对于正方形，宽度为calc((100vw - 10px)/34*9)，对于16：9矩形，它是calc((100vw - 10px)/34*16)。 34等于9 + 16 + 9。高度必须等于正方形的宽度。

注意：请以完整窗口模式打开代码段 - 由于某种原因，它无法在默认代码段窗口中使用。

正如我所写，此版本仅适用于整个窗口，因为它使用vw，而不是任何宽度小于窗口的容器。

在其他容器中（即，比窗口宽），宽度计算可以类似地使用相对于容器总宽度的比例的百分比来完成。对于在这种情况下你必须使用Javascript的高度，只需将高度设置为生成的正方形宽度。我在下面添加了第二个版本/代码段，演示哪些应该在任何父容器中工作。

html,
body {
  margin: 0;
}

div {
  box-sizing: border-box;
  float: left;
}

.square {
  border: 1px solid red;
  width: calc((100vw - 10px)/34*9);
  height: calc((100vw - 10px)/34*9);
}

.middle_16_9 {
  border: 1px solid green;
  width: calc((100vw - 10px)/34*16);
  height: calc((100vw - 10px)/34*9);
  margin: 0 5px;
}

<div class="square"></div>
<div class="middle_16_9"></div>
<div class="square"></div>

这是使用宽度上的百分比计算和高度上的jQuery的版本：

$(document).ready(function() {
      var squarewidth = $('.square').outerWidth();
      $('.square').css('height', squarewidth);
      $('.middle_16_9').css('height', squarewidth);
    });

html,
body {
  margin: 0;
}

div {
  box-sizing: border-box;
  float: left;
}

.square {
  border: 1px solid red;
  width: calc((100% - 10px)/34*9);
  height: 100px;
  /* will be changed immediately by script */
}

.middle_16_9 {
  border: 1px solid green;
  width: calc((100% - 10px)/34*16);
  height: 100px;
  /* will be changed immediately by script */
  margin: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<div class="middle_16_9"></div>
<div class="square"></div>

用3盒，2平方和1 16：9填充容器并保持纵横比

2 个答案: