Как мне прикрепить один из гибких элементов div к правому верхнему углу? - PullRequest
Новая
       39

Как мне прикрепить один из гибких элементов div к правому верхнему углу?

1 голос
/ 30 марта 2020

Существует пример .

Существует html шаблон: 

<div class="wrapper">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  <div class="content">Content 4</div>
  <div class="content">Content 5</div>
  <div class="content">Content 6</div>
  <div class="content">Content 7</div>
  <div class="content">Content 8</div>
  <div class="content">Content 9</div>
  <div class="content">Content 10</div>
  <div class="content">Content 11</div>
  <div class="content">Content 12</div>
  <div class="content">Content 13</div>
  <div class="content">Content 14</div>
  <div class="content">Content 15</div> 

  <div  class="content sticked">Div in Upper Right Corner</div>
</div>

Существует CSS: 

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.content {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

.sticked {
  height: 200px;
  background: red;
}

Мне нужно, чтобы «прикрепленный» элемент всегда размещался вместо правых верхних элементов («Содержимое 6» и «Содержимое 12» на рисунке ниже)

enter image description here

Или в месте «Содержимое 3» и «Содержимое 6» на рисунке ниже

enter image description here

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

1 Ответ

2 голосов
/ 30 марта 2020

Это можно сделать с сеткой CSS: 

.wrapper {
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  grid-auto-rows:100px;
  grid-auto-columns:100px; /* the width of the red columns */
  margin-right:100px; /* the last column will always overlap so we need to rectify with margin */
}

.content {
  border: 1px solid;
}

.sticked {
  grid-column:-1; /* last column */
  grid-row:1/span 2;
  background: red;
}
<div class="wrapper">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  <div class="content">Content 4</div>
  <div class="content">Content 5</div>
  <div class="content">Content 6</div>
  <div class="content">Content 7</div>
  <div class="content">Content 8</div>
  <div class="content">Content 9</div>
  <div class="content">Content 10</div>
  <div class="content">Content 11</div>
  <div class="content">Content 12</div>
  <div class="content">Content 13</div>
  <div class="content">Content 14</div>
  <div class="content">Content 15</div> 
  <div class="content">Content 16</div>
  <div class="content">Content 17</div>
  <div class="content">Content 18</div>
  <div class="content">Content 19</div> 
  <div class="content">Content 20</div>
  <div class="content">Content 21</div>
  <div class="content">Content 22</div>
  <div class="content">Content 23</div> 

  <div  class="content sticked">Div in Upper Right Corner</div>
</div>
...