私は下の絵に描かれているように私のdivを構築しようとしています：深く埋め込まれたdiv
トラブルこれを達成するために最も適しているそれぞれのCSSの構文を見つけるを持ちます。私はdisplay:flexとoverflow-y:autoについて知っていますが、この手法は複数レベルの埋め込みdivに対しては機能しません。
私はcssの初心者ですが、そのような質問は既に尋ねられているのですが、それを研究する正しいキーワードを考えることはできません。
https://jsfiddle.net/5p4mrmm6/
それは幅や大きさを把握するのはあなた次第ですが、これはおそらく、一般的な構造になります。私は.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>。あなたは、あなたが将来的にこれを使用することができ、グリッド・システムを使用するようにブラウザを有効にしている場合
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;
;
}<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>：
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;
}<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>
ディスプレイ：グリッドは、ここで浮動小数点は静的な場合もあります... –