Question

我试图弄清楚如何在display: table-cell元素中的两个元素之间创建垂直间隙。我的局限性是该元素无法更改，必须保留table-cell，但是表单元格中的html可以更改。这是我的尝试，但这不起作用：

.table {
  display: table;
}

.row {
  display: table-row;
  border: 1px solid black;
}

.cell {
  display: table-cell;
  width: 50%;
}

.top {
  vertical-align: top;
}

.bottom {
  vertical-align: bottom;
}

<div class="table">
  <div class="row">
    <div class="cell first">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim neque, interdum vitae tellus in, ullamcorper consectetur dui. Phasellus porttitor pharetra eros, tincidunt rhoncus ex lacinia non. Vestibulum cursus massa lorem, vel commodo neque rhoncus a. Quisque ac quam nisl. Quisque eu gravida justo. Duis ac pulvinar ex, vel fringilla nibh. Sed auctor rutrum augue, vel lobortis ligula sodales vel. Integer nec ex aliquet, facilisis dolor sit amet, convallis nunc. Nullam non condimentum diam, at porta tellus. Sed bibendum mollis metus ut feugiat. Donec odio ipsum, ultricies at euismod a, sodales volutpat nunc. Suspendisse fringilla egestas diam, mattis ornare nisl. Phasellus ac ipsum a tortor mattis faucibus. Morbi pulvinar egestas enim quis commodo. Sed in semper turpis. Aliquam odio nulla, hendrerit ac ipsum interdum, malesuada cursus eros.

Nam ac sem tempus, malesuada urna eu, porttitor dui. Donec at nisl mollis, maximus risus vitae, malesuada erat. Vestibulum purus libero, cursus sit amet tincidunt a, egestas in velit. Sed dapibus auctor luctus. Quisque et porta justo. Fusce sed tempor odio, quis congue libero. Vestibulum ipsum nisl, scelerisque sed lectus nec, congue dapibus nisi. Quisque sit amet dui tellus. Suspendisse eleifend faucibus metus, sit amet tristique mauris bibendum feugiat. Vestibulum nec finibus nunc. Curabitur pulvinar non libero eu pharetra. Ut eget vulputate justo. Ut feugiat tincidunt dignissim. Sed vitae pharetra quam. Cras vel commodo sapien, a gravida augue.
      </p>
    </div>
    <div class="cell">
      <div class="top">
        <p>
          This is some text that should be located to the top
        </p>
      </div>
      <div class="bottom">
        <p>
          This is some text that should be located at the bottom
        </p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/82y1nvot/

我曾考虑过使用display: absolute，但问题是绝对值将不会保存在表行中，而这是我需要在其中设置相对值的地方。

Answer 1

您可以通过使用绝对位置来实现。

添加以下CSS：

.cell {
  display: table-cell;
  position: relative;
  width: 50%;
}

.top, .bottom {
  position: absolute;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

请参见小提琴https://jsfiddle.net/2c7xd8ue/1/

Answer 2

我改变了主意。我使用的是flexbox而不是网格，它为您需要的东西提供了更多的跨浏览器支持。

.cell:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

请注意，您不能使用display: table-cell。您可以删除“ .row” div，并在.table div上也使用flex来获得相同的“ 2列”布局。

.table {
  display: flex;
}

.cell:last-child {
  flex: 50% 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

https://jsfiddle.net/0oxyL7cj/

在表格单元格元素中创建垂直间隙

2 个答案: