这是我的代码(后面的解释):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>
上面的代码旨在将屏幕分成三组图 block :
- 第 3 组占据屏幕的整个右侧 - 其宽度是可配置的(目前设置为 50%)。它的内容可以忽略,因为它目前是 future 开发的占位符。
- 第 1 组占据屏幕左侧剩余部分的上半部分,包含 6 个 3x2 布局的方形图 block 。每个图 block 的宽度应相等。
- 第 2 组填充了第 1 组下方的最后剩余空间。它有 2 个垂直布局的图 block ,横跨整个可用宽度和高度,在它们之间均匀分布垂直空间。
所以代码似乎完成了我需要它做的所有事情,除了我需要第 1 组瓷砖为方形的部分。我目前正在将它硬编码为这个问题的占位符 - 这在实际产品中无法完成,因为它将部署到网络中的多台机器上,渲染到不同屏幕分辨率的不同媒体上。
我应该如何更改我的代码以实现此目的?
编辑:将问题标题从 iframe 更改为 div,因为问题最初是针对它的,尽管最后发布的问题是针对 tile div。
最佳答案
感谢 ovokuro 将包含 answer 的问题与我联系起来这符合我的目的,但由于解决方案在该问题的评论中,我将在此处重新发布它作为正确答案: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 答案之后,我发现 #container
中的 display
属性对于解决方案来说是多余的,因此我已将它们从我的解决方案中删除代码片段。
构成此解决方案的特定组件是:
#container
-position: relative
当然还有宽度值#element
- 除background-color
之外的所有指定属性。#dummy
-margin-top
根据上面链接的答案中提供的解释,第 3 点设置纵横比:当边距指定为百分比值时,它计算为包含元素宽度的百分比。因此,如果该值为 100%,它会将包含的元素拉伸(stretch)为 1:1 的纵横比。 75% 的值会将其拉伸(stretch)为 4:3,依此类推。
设置宽高比后,第 1 点和第 2 点共同工作,以确保容器的实际内容将填满整个空间。
jsfiddle 答案归功于 JesseBuesking。
关于javascript - 将 div 的高度设置为等于计算出的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43229570/