Ashlis
@Ashlis

Как сверстать блок, чтобы дочерние элементы переносились на новую строку с учетом фиксированной кнопки в углу?

6190f9109a9ca243118047.jpeg
Кнопка "item fixed" должна всегда находится в правом нижнем углу независимо от количества элементов "item" внутри блока и под этой кнопкой не должно быть элементов "item". Любой "item" если он не влезает, должен переходить на строку ниже.
Важно то, что контента всегда больше, а блок должен быть всегда выстой в 2 строки.
Можно ли так сделать без js?
  • Вопрос задан
  • 420 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
На скорую рука как-то так:


- Чтобы кнопка стала внизу, помещаем её в контейнер равный двум строкам, а саму кнопку делаем в одну строку
- Чтобы верхняя строка не перекрывалась контейнером используем shape-outside с помощью которого обрезаем высоту верхней строки у самого контейнера
- Чтобы контейнер стал обтекаемым используем float
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Pavel-ww
@Pavel-ww
Есть ужасающе костыльные способы это сделать на css html - использование чекбоксов/радио, псевдокласса target и прочая дичь. Всё это имеет только академический интерес. Описывать долго и нудно. Если погуглите - найдете.

Если нужен простой спойлер - тэг <details>

Не занимайтесь ерундой. Javascript в руки и вперед
Ответ написан
@alexalexes
Как упомянуто в соседнем ответе, будет очень костыльно и чисто для спортивного интереса.
К тому же, есть ограничение на фиксированный размер элемента, которое вам не нужно.
<style>
    div.container
    {
      display: flex;
      flex-wrap: wrap;
      width: 770px;
      height: 90px;
      background-color: green;
      overflow: hidden;
    }
    div.container > div
    {
      width: 60px;
      height: 25px;
      background-color: #df1245;
      text-align: center;
      margin: 5px;
      padding: 5px 0;
    }
    div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
    {
      order: 2;
    }
    div.container > label.more
    {
      display: block;
      width: 130px;
      height: 25px;
      margin: 5px;
      padding: 5px 0;
      text-align: center;
      order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
      background-color: #78d412;
    }
    div.container label.more span.less
    {
      display: none;
    }
    #show-more-state
    {
      display: none;
    }
    #show-more-state:checked ~ div.container
    {
      height: auto;
    }
    #show-more-state:checked ~ div.container label.more
    {
      order: 3;
      margin-left: auto;
    }
    #show-more-state:checked ~ div.container label.more span.more
    {
      display: none;
    }
    #show-more-state:checked ~ div.container label.more span.less
    {
      display: initial;
    }
  </style>
  <input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
  <div class="container">
    <label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
  </div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы