html - 每个 div 旁边有多个随浏览器缩放的 div

Question

好的，开始吧。

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

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

这是我目前所拥有的:

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

这段代码没有保持纵横比，第三个 block 跳到下一行。

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

Answer 1

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

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