結構複雜

Question

的深嵌入式的div我想下面的圖片所描繪的構建我的div：

，並有麻煩發現最適合於實現這一目標，通過各CSS語法。我知道display:flex和overflow-y:auto，但是這種技術對我來說不適用於多層嵌入式div。

我是css的新手，有可能這樣的問題已經被問到，但我想不出正確的關鍵詞來研究它。

https://jsfiddle.net/5p4mrmm6/

Answer 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>

Answer 2

隨着浮子;你可以做somehing類似，但與固定大小：

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>