html - float 期间同一行上的其他 div 移动(Flexgrid 实现)

Question

每当我尝试从该行中 float 一个时，我都很难调整其余 div 的对齐方式。以下是我的意思，附件是一个示例片段。

.flex-grid {
  display: flex;
  justify-content:space-between;
}
.flex-grid .rcorners1 {
    border-radius: 25px;
    background: green;
    padding: 10px; 
    width: 21.5%;
    height: 145px;    
	padding: 16px;
    margin: .50em 0;
	z-index:0;
	position:relative;
    overflow: hidden;
	overflow-x: hidden;
}
.flex-grid .rcorners2 {
    border-radius: 25px;
    background: green;
    padding: 10px; 
    width: 28%;
    height: 200px;    
	top:180px;
	padding: 16px;
    margin: .50em 0;
	z-index:1;
    border-style:solid;
    border-width:5px;  
    border-color:#a6a6a6;
	position:absolute;
	overflow: hidden;
	overflow-x: hidden;	
    z-index:1;
}

<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners2">Sample Selected</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>

请注意，在第三行，当 div(所选样本)处于 float 状态时，剩余的 div 未对齐。请注意第三排的巨大空间。 Seems that when the selected div was on float, remaining div's adjust to take some of the spaces of the selected floating div.

知道如何对齐该行中剩余的 div，以便它可以与其余部分对齐吗？

谢谢!

Answer 1

当你给一个元素 position: absolute 时，你将它从文档流中移除。这意味着它不再占用容器中的空间，周围的元素甚至不知道它的存在。

这就是为什么要重新对齐第三行的原因。当四个元素之一(“Sample Selected”)被绝对定位时， sibling 会调整到新的空白空间。

您可以尝试使用 position: relative，它不会从文档流中删除元素。

.flex-grid {
  display: flex;
  justify-content: space-between;
}

.flex-grid .rcorners1 {
  border-radius: 25px;
  background: green;
  padding: 10px;
  width: 21.5%;
  height: 145px;
  padding: 16px;
  margin: .50em 0;
  z-index: 0;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
}

.flex-grid .rcorners2 {
  border-radius: 25px;
  background: green;
  padding: 10px;
  width: 28%;
  height: 200px;
  top: -250px; /* ADJUSTED */
  right: 250px; /* NEW */
  padding: 16px;
  margin: .50em 0;
  z-index: 1;
  border-style: solid;
  border-width: 5px;
  border-color: #a6a6a6;
  position: relative; /* ADJUSTED */
  overflow: hidden;
  overflow-x: hidden;
  z-index: 1;
}

<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>
<div class="flex-grid">
  <div class="rcorners1">Sample</div>
  <div class="rcorners2">Sample Selected</div>
  <div class="rcorners1">Sample</div>
  <div class="rcorners1">Sample</div>
</div>

https://jsfiddle.net/pLuye06k/