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

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而不是网格，它为你需要的东西提供了更多的crossbrowser支持。

.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/