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

Question

[Andy Oker]

Кнопка "item fixed" должна всегда находится в правом нижнем углу независимо от количества элементов "item" внутри блока и под этой кнопкой не должно быть элементов "item". Любой "item" если он не влезает, должен переходить на строку ниже.
Важно то, что контента всегда больше, а блок должен быть всегда выстой в 2 строки.
Можно ли так сделать без js?

Answer 1

[Виталий Першин]

На скорую рука как-то так:


- Чтобы кнопка стала внизу, помещаем её в контейнер равный двум строкам, а саму кнопку делаем в одну строку
- Чтобы верхняя строка не перекрывалась контейнером используем shape-outside с помощью которого обрезаем высоту верхней строки у самого контейнера
- Чтобы контейнер стал обтекаемым используем float

Comments

[Andy Oker]

То, что нужно)

Answer 2

[Pavel-ww]

Есть ужасающе костыльные способы это сделать на css html - использование чекбоксов/радио, псевдокласса target и прочая дичь. Всё это имеет только академический интерес. Описывать долго и нудно. Если погуглите - найдете.

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

Не занимайтесь ерундой. Javascript в руки и вперед

Comments

[Andy Oker]

Вы, наверное, про функционал по клику на кнопку "показать еще" (использование чекбоксов/радио, псевдокласса target) ?

[Pavel-ww]

Andy Oker, да

[Andy Oker]

Pavel-ww, сам функционал по клику на "показать еще" не имеет значения, вопрос только в переносе "item" на новую строку с учетом этой кнопки.

[Pavel-ww]

Andy Oker, position absolute - единственное что можно сделать. Нет никакого способа чтобы items обтекали (учитывали) кнопку если она в абсолютной позиции

[Pavel-ww]

Andy Oker, можно просто сделать красиво - чтобы items уходили в полупрозрачность под кнопку с помощью ::after

[Pavel-ww]

Хотя, вот такая идея пришла - если всё сделать на гридах, то кнопке можно задать расположение в самой последней ячейке с помощью отрицательных значений для grid-column: -1/-2, grid-row: -1/-2

[Andy Oker]

Pavel-ww, такой вариант возможен, да, но у него есть один момент - сами "item" имеют разную ширину и тогда будет ситуация, что последний элемент перед кнопкой "показать еще" будет не полностью виден, этого хотелось бы избежать

[Pavel-ww]

Andy Oker, c флексом тоже можно поиграться align-self, margin, order для кнопки.
Забейте код в песочницу. На пальцах не удобно ))

[Andy Oker]

Pavel-ww, само собой поиграться то можно, я и играюсь, только решения пока не нашлось, в этом и вопрос)
Флекс и ордер не совсем подходит, там нужно знание о том, сколько элементов перед кнопкой. Я думал, что можно через грид сделать, но пока у меня это не удалось.

[Pavel-ww]

Максимум вот так можно флексом

.items {
	display: flex;
	flex-wrap: wrap;
	max-width: 600px;
}
.item {
	padding: 10px;
	border: 1px solid #eee;
	flex: 1 1 max-content;
}
.button {
	padding: 10px;
	background-color: rgb(255, 208, 0);
	order: 1;
	margin-left: auto;
}

<div class="items">
           <div class="button">Показать еще</div>
           <div class="item">Lorem</div>
           <div class="item">Lorem</div>
           <div class="item">Lorem</div>
           <div class="item">Lorem ipsum dolor sit amet.</div>
           <div class="item">Lorem</div>
           <div class="item">Lorem, ipsum dolor.</div>
           <div class="item">Lorem</div>
           <div class="item">Lorem</div>
           <div class="item">Lorem, ipsum.</div>
           <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing.</div>
       </div>

На какой то ширине и в зависимости от контента кнопка все равно перескакивать будет.

[Andy Oker]

Pavel-ww, на флексах я слабо представляю решение, надежда на гриды и на какую - то другую html - структуру, которая позволит всё - таки сделать задуманное

[Pavel-ww]

Andy Oker, а, ну да. Я увлекся и забыл про переполнение. С переполнением только position absolut для кнопки. Так что без JS думаю не обойтись. Надо вставлять замещающий кнопку элемент в DOM с её размерами и в нужном месте.

В CSS можно сделать просто логически симпатично. Как то так. Это самый надежный вариант

Answer 3

[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>

Comments

[Andy Oker]

Вы, наверное, про функционал по клику на кнопку "показать еще"?
Спасибо за пример, но тут вопрос только в переносе "item" на новую строку с учетом этой кнопки =)