Создать вертикальный разрыв в элементе ячейки таблицы

#html #css

#HTML #css

Вопрос:

Я пытаюсь выяснить, как я могу создать вертикальный разрыв между двумя элементами, которые расположены в 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 , но проблема в том, что абсолютное значение не будет храниться в строке таблицы, где мне нужно было бы установить относительное значение.

1. Разрешено ли вам использовать css-сетки? Вы не можете выровнять дочерние элементы ячейки таблицы по-разному (то, что vertical-align вы использовали, не делает того, что, я думаю, вы думаете, что это делает), но с помощью css grids вы можете поместить оба элемента в одну пару colum / row и использовать align-self для перемещения одного вверху, а другого внизу.

2. @arieljuod можете ли вы создать пример?

Ответ №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 /

1. Единственная проблема с этим подходом заключается в том, что текст будет перекрываться, если экран станет достаточно маленьким. Таким образом, для устранения этого эффекта также потребуется медиа-запрос в определенной точке.

2. @Bojan Вы также можете добавить margin-bottom к .top , равный высоте .bottom

Ответ №2:

Я передумал. Вместо сетки я использовал flexbox, в нем больше кроссбраузерной поддержки для того, что вам нужно.

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

Обратите внимание, что для этого вы не можете использовать display: table-cell . Вы можете удалить div «.row» и использовать flex также в .table div, чтобы получить тот же макет «2 столбца».

 .table {
  display: flex;
}

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

https://jsfiddle.net/0oxyL7cj/