Question

我正在寻找一种方法来自动填充div中p个元素之间的空间，以便每个元素间隔相等，第一个元素位于上边距，最后一个元素位于底部边距。

这是一个jsfiddle示例：https://jsfiddle.net/5b7am7qu/

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

只是说例如div设置了高度，第一段如何位于上边距，底部边距为底部边距，然后是每个其他p元素之间的等距垂直间距。

我无法为每个段落提供ID或类，但可以在父级中定义第一个/最后一个子句。

Answer 1

您可以使用 Flexbox 与justify-content: space-between;和flex-direction: column; Fiddle

执行此操作

.right {
  display: flex;
  border: 1px solid black;
  margin: 5px;
  width: 40%;
  height: 200px;
  flex-direction: column;
  justify-content: space-between;
}

p {
  margin: 0;
}

<div class="right">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

Answer 2

你可以给每个p一个顶部＆amp;底部边距，以确保它们在每个上方和下方具有相同的空间。您不需要区分:first-child和:last-child，因为保证金将为所有段落元素制定。

＆＃13;

.container {
  width: 500px;
  margin: 15px auto;
}
.container div {
  display: table-cell;
  padding: 5px;
}
.left {
  width: 60%;
  background-color: red;
}
.right {
  width: 40%;
  background-color: green;
}
p {
  margin: 10px 0;
}

＆＃13;

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="right">
    <p>
      Paragraph 1
    </p>
    <p>
      Paragraph 2
    </p>
    <p>
      Paragraph 3
    </p>
  </div>
</div>

＆＃13;

随机数元素之间的自动垂直间距，以填充父级高度

2 个答案: