0

这是我的代码（后解释）：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 组占据屏幕左侧剩余部分的上半部分，包含 6 个 3x2 布局的方形图块。每个瓦片的宽度应该相等。
  • 第 2 组填充第 1 组下方的最后剩余空间。它在垂直布局中有 2 个图块，跨越整个可用宽度和高度，在它们之间均匀分布垂直空间。

所以代码似乎做了我需要做的所有事情，除了我需要第 1 组图块为方形的部分。我目前正在硬编码它作为这个问题的占位符——这在实际产品中无法完成，因为它将通过网络部署到多台机器上，渲染到不同屏幕分辨率的不同媒体上。

我应该如何更改我的代码来实现这一点？

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

4

1 回答 1

0

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

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

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

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

  1. #container-position: relative当然，还有一个宽度值
  2. #element- 指定的所有属性，除了background-color.
  3. #dummy-margin-top

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

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

感谢 JesseBuesking 的 jsfiddle 答案。

于 2017-04-06T03:38:32.000 回答