如何將一個 div 粘貼到右上角？

Question

有一個例子。

 .wrapper { display: flex; flex-wrap: wrap; } .content { height: 100px; width: 100px; border: 1px solid; } .sticked { height: 200px; 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 sticked">Div in Upper Right Corner</div> </div>

我需要始終將“粘貼”元素放置在右上角元素的位置（下圖中的“內容 6”和“內容 12”）

或者在下圖中“內容3”和“內容6”的地方

如何將其中一個 flex div 粘貼到右上角？

Answer 1

這可以通過 CSS 網格來完成：

 .wrapper { display: grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); grid-auto-rows:100px; } .content { border: 1px solid; } .sticked { grid-column:-2; /* 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>