结构复杂

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>