Совместите последний li в нижней части контейнера - PullRequest
Новая
       51

Совместите последний li в нижней части контейнера

0 голосов
/ 21 октября 2019

Я не могу понять, как я могу выровнять последний элемент <li> в нижней части контейнера. Проблема, которую я нахожу, состоит в том, что из-за column-count и column-fill содержимое автоматически адаптируется к столбцам, мешая мне позиционировать последний элемент, как я хочу. Я пытался использовать padding-top, margin-top и line-height, но результат всегда одинаков. Есть ли способ решить эту проблему?

Вот пример того, что я имею в виду: 

* { font-family: Sans-serif }
.table1 { border: 1px solid red }

.table2 { border: 1px solid red }

.title-list { column-count: 2 }

.title-list li { margin-bottom: 10px }

.title,
.title:hover {
    border-bottom: 1px solid #cae3f7;
    text-decoration: none;
    color: black
}

.more1 {
  list-style-type: none;
  margin-left: -15px
}
.more2 {
  list-style-type: none;
  margin-left: -15px;
  padding-top: 30px
}
<body>
  <p><b>I want to align the last link at the bottom of the div</b></p>
  <div class="table1">
    <ol class="title-list">
      <li><a class="title" href="#">I'm the first title</a></li>
      <li><a class="title" href="#">I'm the second title</a></li>
      <li><a class="title" href="#">I'm the third title</a></li>
      <li><a class="title" href="#">I'm the fourth title</a></li>
      <li><a class="title" href="#">I'm the fifth title</a></li>
      <li><a class="title" href="#">I'm the sixth title</a></li>
      <li><a class="title" href="#">I'm the seventh title</a></li>
      <li><a class="title" href="#">I'm eighth title </a></li>
      <li class="more1"><a href="#">Show me more >>></a></li>
    </ol>
  </div>
  <p><b>But when I do this the columns change </b></p>
  <div class="table2">
    <ol class="title-list">
      <li><a class="title" href="#">I'm the first title</a></li>
      <li><a class="title" href="#">I'm the second title</a></li>
      <li><a class="title" href="#">I'm the third title</a></li>
      <li><a class="title" href="#">I'm the fourth title</a></li>
      <li><a class="title" href="#">I'm the fifth title</a></li>
      <li><a class="title" href="#">I'm the sixth title</a></li>
      <li><a class="title" href="#">I'm the seventh title</a></li>
      <li><a class="title" href="#">I'm the eighth title </a></li>
      <li class="more2"><a href="#">Show me more >>></a></li>
    </ol>
  </div>
</body>

1 Ответ

0 голосов
/ 21 октября 2019 
/* the container */
.table-1 {
  position: relative;
}

li:last-of-type {
  position: absolute;
  right: 0;
  bottom: 0;
}
...