Question

我正在尝试构建我的div，如下图所示：

并且无法找到最适合实现此目的的css语法。我知道display:flex和overflow-y:auto，但这种技术对我来说不适用于多级嵌入式div。

我是css的新手，可能已经问过这样的问题了，但是我想不出正确的关键词来研究它。

Answer 1

这可能是一般结构，但是由您决定宽度和尺寸。我给了一个.grow类来使一个元素占用所有可用空间 - 根据你的需要重用它。

＆＃13;

.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;
}

＆＃13;

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

Answer 2

浮动;你可以做类似但有固定大小的东西：

＆＃13;

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;

如果您已启用浏览器以使用网格系统，那么您可以在将来使用它：

＆＃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;

深度嵌入具有复杂结构的div

2 个答案: