具有分部的垂直div

Question

我想在我的网站上使用X垂直分区创建一个页面。这些跨越页面的顶部到底部并占用，例如10vw。

这很好，但是我现在正在努力的是，在那些我想要的部分的那些垂直div中。一些垂直div将有1个部分，大约2个，还有3个。

This is a fiddle of what I have so far

＆＃13;

＆＃13;

#topics_selection-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 27px;
  bottom: 20px;
  overflow-x: auto;
  overflow-y: none;
  white-space: nowrap;
}

.topics_selection-level_container {
  display: inline-block;
  height: 99.5%;
  width: 10vw;
  margin: 0px -5px 0px 0px;
  overflow: none;
}

.topics_selection-split_cell_1 {
  background: green;
  margin: 0px;
  height: 100%;
}

.topics_selection-split_cell_2 {
  background: gray;
  margin: 0px;
  height: 50%;
}

.topics_selection-split_cell_3 {
  background: blue;
  margin: 0px;
  height: 50%;
}

.topics_selection-split_cell_4 {
  background: magenta;
  margin: 0px;
  height: 33%;
}

.topics_selection-split_cell_5 {
  background: orange;
  margin: 0px;
  height: 33%;
}

.topics_selection-split_cell_6 {
  background: purple;
  margin: 0px;
  height: 33%;
}

.topics_selection-level_1 {
  background: red;
}

.topics_selection-level_2 {
  background: yellow;
}

＆＃13;

<div id="topics_selection-container">
  <div class="topics_selection-level_container topics_selection-level_1">
    <div class="topics_selection-split_cell_1"></div>
  </div>
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_2"></div>
    <div class="topics_selection-split_cell_3"></div>
  </div>
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_4"></div>
    <div class="topics_selection-split_cell_5"></div>
    <div class="topics_selection-split_cell_6"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当你看到它有效！这正是我想要的（除了三个底部的小空间，因为33％）。然而，当我将内容放入那些较小的部门时，你会发现不同的事情。包裹到文本大小的那种。

有人可以建议如何解决这个问题吗？定位是CSS不是我的强项！

Answer 1

如果你切换到浮动，它会工作。

.topics_selection-level_container { float:left; height: 99.5%; width: 10vw; margin: 0;  }

https://jsfiddle.net/48tvezgv/3/

#topics_selection-container { position: absolute; top: 0; left: 0; right: 27px; bottom: 20px; overflow-x: auto; overflow-y: hidden; }

.topics_selection-level_container { float:left; height: 99.5%; width: 10vw; margin: 0;  }

.topics_selection-split_cell_1 { background: green; margin: 0px; height: 100%; }
.topics_selection-split_cell_2 { background: gray; margin: 0px; height: 50%; }
.topics_selection-split_cell_3 { background: blue; margin: 0px; height: 50%; }
.topics_selection-split_cell_4 { background: magenta; margin: 0px; height: calc(100% / 3); }
.topics_selection-split_cell_5 { background: orange; margin: 0px; height: calc(100% / 3); }
.topics_selection-split_cell_6 { background: purple; margin: 0px; height: calc(100% / 3); }

.topics_selection-level_1 { background: red; }
.topics_selection-level_2 { background: yellow; }

<div id="topics_selection-container">

  <div class="topics_selection-level_container topics_selection-level_1">
    <div class="topics_selection-split_cell_1">zxczxc</div>
  </div>
        	
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_2">asdas</div>
    <div class="topics_selection-split_cell_3">qweqwe</div>
  </div>
  
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_4">cvbcvb</div>
    <div class="topics_selection-split_cell_5">urtyryr</div>
    <div class="topics_selection-split_cell_6">hdhdfh</div>
  </div>
  
</div>

此外，“none”不是溢出的有效值，我想你想使用隐藏。 33％不够精确，使用calc (100% / 3)

Answer 2

将overflow: none;更改为overflow: hidden;中的.topics_selection-level_container。这样就可以了。

.topics_selection-level_container { display: inline-block; height: 99.5%; width: 10vw; margin: 0px -5px 0px 0px; overflow: hidden; }

https://jsfiddle.net/48tvezgv/4/

Answer 3

使用height:33.333333%代替33％作为33*3=99 ...所以你的1％还剩下......

您已将display:inline-block应用于默认为vertical-align:baseline ...

的外部容器

您必须将其更改为vertical-align:top

<强> Updated Fiddle

Stack Snippet

＆＃13;

＆＃13;

#topics_selection-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 27px;
  bottom: 20px;
  overflow-x: auto;
  overflow-y: none;
  white-space: nowrap;
}

.topics_selection-level_container {
  display: inline-block;
  height: 99.5%;
  width: 10vw;
  margin: 0px -5px 0px 0px;
  overflow: none;
  vertical-align: top;
}

.topics_selection-split_cell_1 {
  background: green;
  margin: 0px;
  height: 100%;
}

.topics_selection-split_cell_2 {
  background: gray;
  margin: 0px;
  height: 50%;
}

.topics_selection-split_cell_3 {
  background: blue;
  margin: 0px;
  height: 50%;
}

.topics_selection-split_cell_4 {
  background: magenta;
  margin: 0px;
  height: 33.333333%;
}

.topics_selection-split_cell_5 {
  background: orange;
  margin: 0px;
  height: 33.333333%;
}

.topics_selection-split_cell_6 {
  background: purple;
  margin: 0px;
  height: 33.333333%;
}

.topics_selection-level_1 {
  background: red;
}

.topics_selection-level_2 {
  background: yellow;
}

＆＃13;

<div id="topics_selection-container">
  <div class="topics_selection-level_container topics_selection-level_1">
    <div class="topics_selection-split_cell_1"></div>
  </div>
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_2"></div>
    <div class="topics_selection-split_cell_3"></div>
  </div>
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_4">ggg</div>
    <div class="topics_selection-split_cell_5">ffff</div>
    <div class="topics_selection-split_cell_6">dddd</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以使用flex，然后2级div可以增长到适合列：

#topics_selection-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 27px;
  bottom: 20px;
  overflow-x: auto;
  overflow-y: none;
  
  display: flex;           
  flex-direction: row; /* align level 1 children in columns */
  flex-wrap: wrap;
}

.topics_selection-level_container {
  height: 99.5%;
  width: 10vw;
  margin: 0px;      /* not sure what your left margin was doing so removed it - you can add it back if you want */
  overflow: none;
  display: flex;
  flex-direction: column;  /* align level 2 children in rows within this column */
  flex-wrap: nowrap;
}
.topics_selection-level_container > div {
  flex:1;                /* make level2 children grow to fill the column equally */
  display:flex;
  align-items: center;   /* this is for vertical aligning */
  
  justify-content: center; /* these 2 are for horizontal aligning */
  text-align:center;
}

.topics_selection-split_cell_1 {
  background: green;
}

.topics_selection-split_cell_2 {
  background: gray;
}

.topics_selection-split_cell_3 {
  background: blue;
}

.topics_selection-split_cell_4 {
  background: magenta;
}

.topics_selection-split_cell_5 {
  background: orange;
}

.topics_selection-split_cell_6 {
  background: purple;
}

.topics_selection-level_1 {
  background: red;
}

.topics_selection-level_2 {
  background: yellow;
}

<div id="topics_selection-container">

  <div class="topics_selection-level_container topics_selection-level_1">
    <div class="topics_selection-split_cell_1">add</div>
  </div>

  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_2">stuff may be over multiple lines</div>
    <div class="topics_selection-split_cell_3">stuff</div>
  </div>

  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_4">stuff that can wrap</div>
    <div class="topics_selection-split_cell_5">this works</div>
    <div class="topics_selection-split_cell_6">yeah!</div>
  </div>

</div>

Answer 5

你只需稍微调整一下你可以给出一个34％的高度，或者给它们所有33％的小数点更多。

编辑：为每个内部div添加内容，并将元素与父项顶部对齐。

＆＃13;

＆＃13;

#topics_selection-container { position: absolute; top: 0; left: 0; right: 27px; display:inline-block; bottom: 20px; overflow-x: auto; vertical-align:top; overflow-y: none; white-space: nowrap; }
.topics_selection-level_container { display: inline-block; height: 99.5%; width: 10vw; margin: 0px -5px 0px 0px; overflow: none; }
.topics_selection-split_cell_1 { background: green; margin: 0px; height: 100%; }
.topics_selection-split_cell_2 { background: gray; margin: 0px; height: 50%; }
.topics_selection-split_cell_3 { background: blue; margin: 0px; height: 50%; }
.topics_selection-split_cell_4 { background: magenta; margin: 0px;  height: 34%; }
.topics_selection-split_cell_5 { background: orange; margin: 0px;   height: 33%; }
.topics_selection-split_cell_6 { background: purple; margin: 0px; height: 33%; }
.topics_selection-level_1 { background: red; vertical-align:top; }
.topics_selection-level_2 { background: yellow; vertical-align:top; }

＆＃13;

<div id="topics_selection-container">

  <div class="topics_selection-level_container topics_selection-level_1">
    <div class="topics_selection-split_cell_1">asdf</div>
  </div>
        	
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_2">asdf</div>
    <div class="topics_selection-split_cell_3">asdf</div>
  </div>
  
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_4">asdf</div>
    <div class="topics_selection-split_cell_5">asdf</div>
    <div class="topics_selection-split_cell_6">asdf</div>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;