CSS：使用偶数空间垂直分布<div> s或<li> </li> </div>

Question

我想在框中垂直均匀地分布4行文本，在div的长度上设置为包含div的50％（即没有固定高度）。我希望布局看起来像这样：

根据目前的计划，将有四个这样的盒子，但是这可能会在将来发生变化，因此理想情况下解决方案可以允许多于或少于四个。如果可能的话，我想要一个仅限CSS的解决方案。

到目前为止，我已经忽略了图形，并尝试了各种选项，以便按照我的意愿对齐框。

这是我迄今为止最好的，这是近似的，但仍然没有按照我想要的方式对齐。

＆＃13;

＆＃13;

.box-green, .box-red, .box-yellow, .box-blue{
  padding:7px;
  width:100%;
}

.box-green {
  background-color:green;
}

.box-red {
  background-color:red;
}

.box-yellow {
  background-color:yellow;
}

.box-blue {
  background-color:blue;
}

div {
  background-color:grey;
  height:50%;
  margin: auto 10% auto auto;
  position: absolute;
  right:0;
  text-align:right;
  top:50%;
  transform:translateY(-50%);
}

ul {
  display:table;
  height:100%;
}

li {
  display:table-row;
  width:100%;
}

＆＃13;

<div>
<ul>
<li><span class="box-green">Line 1</span></li>
<li><span class="box-red">Second line of text</span></li>
<li><span class="box-yellow">3rd line</span></li>
<li><span class="box-blue">Even more text</span></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

然后我需要为每一行添加某种表格格式，以便适当地分发图形和文本。

我希望我能够清楚地解释这个问题。

Answer 1

使用flexbox很容易。

只需在容器上设置以下属性：

ul {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}

FIDDLE （调整浏览器高度以查看此操作）

.box-green,
.box-red,
.box-yellow,
.box-blue {
  padding: 7px;
  width: 100%;
  box-sizing: border-box;
}
.box-green {
  background-color: green;
}
.box-red {
  background-color: red;
}
.box-yellow {
  background-color: yellow;
}
.box-blue {
  background-color: blue;
}
ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: grey;
  height: 50vh;
}

<ul>
  <li class="box-green">Line 1</li>
  <li class="box-red">Second line of text</li>
  <li class="box-yellow">3rd line</li>
  <li class="box-blue">Even more text</li>
</ul>

Answer 2

好吧，即使有人讨厌我这个答案 - 但如果你想要实现类似表格的行为 - 为什么不简单地使用一张表来满足你所需要的一切箱？

<div>
<table>
    <tr>
        <td class="box-yellow">first</td>
    </tr>
    <tr>
        <td class="box-green">Second</td>
    </tr>
    <tr>
        <td class="box-blue">Third</td>
    </tr>
    <tr>
        <td class="box-red">fourth</td>
    </tr>
    </table>
</div>

http://jsfiddle.net/166d5qgp/1/

如果你不希望盒子覆盖（在这个例子中）大约25％的高度，将div放入td， 你完成了使用边距和填充稍微玩一下，以达到所需的精确外观：

<div id="outer">
<table>
    <tr>
        <td><div class="box-yellow">first</div></td>
    </tr>
    <tr>
        <td><div class="box-green">Second</div></td>
    </tr>
    <tr>
        <td><div class="box-blue">Third</div></td>
    </tr>
    <tr>
        <td><div class="box-red">fourth</div></td>
    </tr>
</table>
</div>

http://jsfiddle.net/e97tmr8u/