Как избежать изгиба предметов, которые имеют одинаковую высоту при разрушении - PullRequest
Новая
       0

Как избежать изгиба предметов, которые имеют одинаковую высоту при разрушении

1 голос
/ 25 октября 2019

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

Пробовали с различным отображением и размещением встроенных элементов li, но ничего не работает.

Есть ли способ иметь элементы в списке встроенными и независимыми по высоте? 

.dragscroll {
  display: flex;
  overflow-x: auto;
}

.rectangle-holder {
  border: 1px solid black;
}

ul {
  list-style-type: none;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid p-0">
    <div class="row">
      <div class="col-12">
        <ul class="dragscroll">
          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment1">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment2" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment2">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment3" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment3">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>
          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment4" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment4">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment5" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment5">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment6" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment6">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment7" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment7">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>

1 Ответ

2 голосов
/ 25 октября 2019

Вам необходимо добавить свойство css align-items: flex-start; . Он определяет поведение по умолчанию для того, как изгибаемые элементы располагаются вдоль поперечной оси на текущей линии. И flex-start установленный край поля поперечного старта элементов размещается на линии перекрестного старта. 

.dragscroll {
    display: flex;
    overflow-x: auto;
    align-items: flex-start;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...