我正在尝试构建我的div,如下图所示:
并且无法找到最适合实现此目的的css语法。我知道display:flex
和overflow-y:auto
,但这种技术对我来说不适用于多级嵌入式div。
我是css的新手,可能已经问过这样的问题了,但是我想不出正确的关键词来研究它。
答案 0 :(得分:1)
这可能是一般结构,但是由您决定宽度和尺寸。我给了一个.grow
类来使一个元素占用所有可用空间 - 根据你的需要重用它。
.flex {
display: flex;
}
.col {
flex-direction: column;
}
.grow {
flex-grow: 1;
}
.parent {
max-width: 960px;
width: 90%;
margin: auto;
}
.a {
background: pink;
}
.b {
background: orange;
}
.c {
background: red;
}
.d {
background: brown;
}
.e {
background: yellow;
}
.f {
background: turquoise;
}

<div class="flex parent">
<div class="a">a</div>
<div class="flex col grow">
<div class="flex">
<div class="b">b</div>
<div class="flex col grow">
<div class="flex">
<div class="c">c</div>
<div class="grow d">d</div>
</div>
<div class="e">e</div>
</div>
</div>
<div class="grow f">
f
</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
浮动;你可以做类似但有固定大小的东西:
div {
float: left;
display: flex;
align-items: center;
justify-content: center;
filter: blur(0.5px);/* to look like your image */
}
.a {
background: #F4CCCC;
height: 110px;
width: 73px;
}
.b {
background: #FF9900;
width: 55px;
height: 44px;
}
.c {
background: #FF0000;
width: 60px;
height: 21px;
}
.d {
background: #BF9000;
height: 21px;
width: 102px;
}
.e {
background: #FFFF00;
width: 162px;
height: 23px
}
.f {
background: #00FFFF;
width: 217px;
height: 66px
}
body {
width: 290px;
margin: 2em;
;
}
&#13;
<div class=a> A</div>
<div class=b> B</div>
<div class=c> C</div>
<div class=d> D</div>
<div class=e> E</div>
<div class=f> F</div>
&#13;
如果您已启用浏览器以使用网格系统,那么您可以在将来使用它:
body {
height:100vh;
display:grid;
grid-template-columns: 30% 20% 15% auto;
grid-template-rows: 25% 25% auto;
}
div {
display: flex;
align-items: center;
justify-content: center;
filter: blur(0.5px);
}
.a {
background: #F4CCCC;
grid-row:1 / 4;
}
.b {
background: #FF9900;
grid-row:1 / 3;
}
.c {
background: #FF0000;
}
.d {
background: #BF9000;
}
.e {
background: #FFFF00;
grid-column:3 / 5;
}
.f {
background: #00FFFF;
grid-column:2 / 5;
}
&#13;
<div class=a> A</div>
<div class=b> B</div>
<div class=c> C</div>
<div class=d> D</div>
<div class=e> E</div>
<div class=f> F</div>
&#13;