Блог

Главная - Вопросы по программированию - Как я могу поддерживать одинаковую высоту сгибания для нескольких списков / элементов списка?

Как я могу поддерживать одинаковую высоту сгибания для нескольких списков / элементов списка?

#html #css #list #flexbox #height

#HTML #css #Список #flexbox #высота

Вопрос:

У меня есть 2 динамических списка, которые располагаются как братья и сестры один поверх другого, используя макет гибкого столбца. Моя дилемма заключается в том, что я не могу заставить списки / элементы списка поддерживать одинаковую высоту сгибания, поскольку список с меньшим количеством элементов всегда, кажется, увеличивает высоту своих элементов.

Пожалуйста, посмотрите мой код ниже. Обратите внимание, как «элемент 1, список 2» растянулся? Я хочу, чтобы все элементы списка для обоих списков соответствовали и имели одинаковую высоту для заполнения основного родительского контейнера. A ul с одним li элементом должен иметь размер до высоты одного li элемента.

 .container {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid black;
}

.list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  border: 1px solid black;
}

.list-item {
  flex: 1 0 auto;
  border: 1px solid black;
}  
 <div class="container">
  <ul class="list">
    <li class="list-item">item 1, list 1</li>
    <li class="list-item">item 2, list 1</li>
    <li class="list-item">item 3, list 1</li>
    <li class="list-item">item 4, list 1</li>
  </ul>
  <ul class="list">
    <li class="list-item">item 1, list 2</li>
  </ul>
</div>

Комментарии:

1. Просто для ясности, вы хотите, чтобы li элементы имели одинаковую высоту независимо от того, в каком ul они отображаются?

2. Вы видите, как список 2, элемент один, растянулся, чтобы заполнить почти половину контейнера? Я хочу, чтобы он составлял 1/5 размера вместе с остальными элементами списка. конечно, их высота может меняться по мере добавления большего количества элементов, но все они должны быть одинаковой высоты. Короче говоря — да.

3. Спасибо за подтверждение. Что должно произойти с родительским ul элементом? Должен ли он уменьшаться до размера одного li или должен оставаться на высоте по умолчанию?

4. Он должен уменьшиться до размера одного li

5. У тебя есть какие-нибудь идеи @Martin? Я вроде как потерялся, ха-ха

Ответ №1:

Я думаю, что, возможно, решил вашу проблему. Прежде всего, потому что вы дали этому элементу класса контейнера ** height: 500px; ** это влияет на высоту ваших ul, li элементов. Я удалил их из вашего CSS и в классе list-item добавил min-height:100px; но вы можете изменить высоту элементов li в соответствии с тем, что вы хотите.

 .container {
  display: flex;
  flex-direction: column;
  width:100%;
  flex:0 0 100%;
  border: 1px solid black;
}

.list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  border: 1px solid black;
}

.list-item {
  min-height:100px;
  border: 1px solid black;
}  
 <div class="container">
  <ul class="list">
    <li class="list-item">item 1, list 1</li>
    <li class="list-item">item 2, list 1</li>
    <li class="list-item">item 3, list 1</li>
    <li class="list-item">item 4, list 1</li>
  </ul>
  <ul class="list">
    <li class="list-item">item 1, list 2</li>
  </ul>
</div>