HTML/CSS Float Left and Top/Bottom without position absolute/fixed

Question

我正在处理我的 Chemistry 应用程序，并且我正在努力显示 div 元素我想象它的工作方式。

我的目标是让 div 像图片一样向左浮动:因此当隐藏红色/绿色 div 时，一切都保持有序。

甚至可以不使用绝对/固定定位吗？我真的需要那些 div 向左浮动并相互了解，所以我无法通过绝对位置解决它。我尝试尝试添加边距，但其他 div 无法适应其他元素边距所占据的位置。 感谢您花时间阅读这篇文章!

添加的代码:

<div class='container'>
<div class='base-cell'>S</div>
<div class='base-cell'>O</div>
<div class='index-cell'>3</div>
<div class='charge-cell'>2-</div>
</div>


.container{
border: 1px solid red;
height: 1.5em;
text-align: center;
position: relative;
}

.base-cell{
position: relative;
background: red;    
height: 1em;
float: left;
margin-top: 0.2em;
font-size: 1em;
border: 1px solid orange;
display: inline-block;
}

.index-cell{
position:relative;
height:0.7em;
margin-top:1.5em;
font-size:0.7em;
display:table;
background: blue;
float:left;
}

.ion-index-cell{
position: relative;
height: 1em;
font-size: 0.7em;
border: 1px solid cyan;
display: table;
background: green;
}

.charge-cell{
height: 1em;
font-size: 0.7em;
border: 1px solid blue;
display: inline-block;
float:left;
}

编辑: 感谢您的回复，我真的不想使用中间栏解决方案，因为另一个要求:抱歉之前没有显示完整的上下文。 如图所示，所有元素都向左流动，我可能需要使用 display: none 隐藏一些元素。这就是为什么我要寻找没有 parent 的解决方案:

Answer 1

如果将图翻转过来，那么使用 float 构建起来就容易多了。您可以使用转换以正确的方式将其翻转回来。

.wrap {
  max-width: 100px;  
  -webkit-transform: rotate(90deg) translate(-170px, -10px);
  -moz-transform: rotate(90deg) translate(-170px, -10px);
  -ms-transform: rotate(90deg) translate(-170px, -10px);
  transform: rotate(90deg) translate(-170px, -10px);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  overflow: hidden;
}
.block {
  height: 40px;
  width: 100%;
  float: left;
  border: 1px solid #000;
  box-sizing: border-box;
  margin: 10px 0;
  
}
.block-left {
  max-width: 40%;  
  border-color: #f00;
}
.block-right {
  max-width: 40%;
  float: right;
  border-color: #0f0;
}

<div class="wrap">
  <div class="block block-top"></div>
  <div class="block block-left"></div>
  <div class="block block-right"></div>
  <div class="block block-bottom"></div>
</div>

<div class="wrap">
  <div class="block block-top"></div>
  <div class="block block-right"></div>
  <div class="block block-bottom"></div>
</div>

<div class="wrap">
  <div class="block block-top"></div>
  <div class="block block-left"></div>
  <div class="block block-bottom"></div>
</div>