Question

好的，这就是。

所以我有3个代表彼此相邻的3个内容块。

我希望它们在保持宽高比的同时扩展到浏览器。

这是我到目前为止所做的：

.dash__node__container {
  padding: 1rem;
  width: 100%;
  padding-bottom: 75%;
  position: absolute;
 } 

.dash__node {
  width: 32.75%;
  height: 50px;
  display: inline-block;
  border: 1px solid #D8D8D8;
  position: relative;
}

和Html：

<div class="dash__node__container">
      <div class="dash__node"></div>
      <div class="dash__node"></div>
      <div class="dash__node"></div>
    </div>

此代码不保持宽高比，第三个块跳转到下一行。

编辑：http://codepen.io/anon/pen/ogRyoO

Answer 1

我认为你可以添加float：left; to dash__node class，并删除position：relative;

Answer 2

删除内联块并添加float：left

Answer 3

这是因为您使用display: inline-block。使用float: left;

Answer 4

使用float: left;防止div分裂并使用padding-bottom技巧而不是height来保持宽高比。

* {
  box-sizing: border-box;
}

.dash__node__container {
  padding: 1rem;
  width: 100%;
  padding-bottom: 75%;
  position: absolute;
 } 

.dash__node {
  float: left;
  width: 32.75%;
  padding-bottom: 10%;
  border: 1px solid #D8D8D8;
  position: relative;
}

Answer 5

您可以使用float:left，但另一种方法是在您的包装中使用font-size:0。这消除了块之间的空间。显然，您需要将字体大小应用于子节点。 More info here

第三个块元素在较小的屏幕尺寸下面，因为你的包装上有填充。将box-sizing:border-box;应用于所有div将对此进行排序。 More on that here

以上是适用于上述内容的小提琴：https://jsfiddle.net/nf7wsmk4/

每个旁边有多个div，可以与浏览器一起缩放

5 个答案: