Question

这是我的代码（后面的解释）：https://jsfiddle.net/L7a35dda/1/

body {
  width: 1920px;
  height: 1080px;
  background-color: rgb(48, 48, 48);
  margin: 0;
  padding: 0;
  
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

/* Overall Styles */
.group-container {
  display: flex;
  flex-direction: column;
}

.group-header {
  height: 40px;
  background-color: rgb(21, 101, 192);
}

.group-body {
  flex-grow: 1;

  display: flex;
}

.tile {
  display: flex;
  flex-direction: column;
}

.tile-header {
  background-color: rgb(25, 118, 210);
}

.tile-body {
  flex-grow: 1;
}

/* Group 1 */
#group-1 {
  width: 50%;
  order: 1;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
}

#group-1 .group-body {
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

#group-1 .tile {
  width: calc(100% / 3);
  height: 300px; /* Placeholder: Actual value needs to be equal to width */
}

/* Group 2 */
#group-2 {
  width: 50%;
  order: 2;
  flex-grow: 1;
  border-right: 3px solid black;
  border-top: 3px solid black;
}

#group-2 .group-body {
  flex-direction: column;
  align-items: flex-start;
}

#group-2 .tile {
  flex-grow: 1;
  width: 100%;
  height: 100%;
}

/* Group 3 */
#group-3 {
  width: 50%;
  height: 100%;
  order: 3;
  border-left: 3px solid black;
}

#group-3 .group-body {
  flex-direction: column;
}

#group-3 .tile {
  flex-grow: 1;
  
  width: 100%;
  height: 100%;
}

<div id="group-1" class="group-container">
  <div class="group-header">Group 1</div>
  <div class="group-body">
    <div class="tile">
      <div class="tile-header">Tile 1A</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1B</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1C</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1D</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1E</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1F</div>
      <iframe class="tile-body"></iframe>
    </div>
  </div>
</div>

<div id="group-2" class="group-container">
  <div class="group-header">Group 2</div>
  <div class="group-body">
    <div class="tile">
      <div class="tile-header">Tile 2A</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 2B</div>
      <iframe class="tile-body"></iframe>
    </div>
  </div>
</div>

<div id="group-3" class="group-container">
  <div class="group-header">Group 3</div>
  <div class="group-body">
    <div class="tile">
      <div class="tile-header">Tile 3A</div>
      <iframe class="tile-body"></iframe>
    </div>
  </div>
</div>

上述代码旨在将屏幕划分为三组图块：

第3组占据屏幕的整个右侧 - 其宽度可配置（目前设置为50％）。其内容可以忽略不计，因为它目前是未来发展的占位符。
第1组占据屏幕左侧剩余部分的上半部分，包含3个2x布局的6个方形瓷砖。每个图块的宽度应相等。
第2组填充第1组下方的最后剩余空间。它在垂直布局中有2个图块，横跨整个可用宽度和高度，在它们之间均匀分布垂直空间。

所以代码似乎做了我需要做的所有事情，除了我需要第1组瓷砖为方形的部分。我目前正在将其硬编码为此问题的占位符 - 这在实际产品中无法完成，因为它将部署到网络中的多台计算机上，呈现在不同屏幕分辨率的不同媒体上。

我应该如何更改代码才能实现此目标？

修改：将问题标题从iframe更改为div，因为问题最初是针对该问题的，尽管最终发布的问题是针对tile div的。

Answer 1

对ovokuro的信用，将包含符合我目的的answer的问题链接到我，但由于解决方案在该问题的评论中，我将在此重新发布为正确答案：http://jsfiddle.net/B8FU8/6245/

＆＃13;

.outer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#container {
    position: relative;
    flex-basis: 20%;
    outline: 1px solid #eee;
    text-align: center;
}

#dummy {
    margin-top: 100%;
}

#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

＆＃13;

<div class="outer">
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text2
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text3
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text4
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text5
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text6
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text7
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text8
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text9
        </div>
    </div>
</div>

＆＃13;

在找到我发现的jsfiddle答案后，我发现display中的#container属性对解决方案来说是多余的，因此我已将其从我的代码段中删除。

构成此解决方案的特定组件是：

#container - position: relative，当然还有宽度值
#element - 除background-color以外指定的所有属性。
#dummy - margin-top

根据上面连接的答案中提供的解释，第3点设置纵横比：当边距被指定为百分比值时，它被计算为包含元素宽度的百分比。因此，如果值为100％，则将包含元素拉伸为1：1的宽高比。值为75％会将其拉伸至4：3，依此类推。

设置宽高比后，第1点和第2点共同起作用，以确保容器的实际内容将填满整个空间。

JesseBuesking对jsfiddle答案的肯定。

将div的高度设置为等于计算的宽度

1 个答案: