将第三个浮动 div 与第一个 div 放在同一级别

Question

我有下一个无法更改的 html 结构 https://jsfiddle.net/fLjs43x7/ ：

HTML：

<div class="grid-parent">

  <div class="something">
    <div class="something-else">

      <div class="grid-100">
      </div>
      <!--- .grid-100 -->

      <div class="grid-60">
        1
      </div>
      <!-- .grid-60 -->

    </div>
    <!-- .something-else -->

    <div class="grid-60">
      2
    </div>
    <!-- .grid-60 -->
  </div>
  <!-- .something -->

  <div class="grid-30">
  </div>
  <!-- .grid-30 -->
</div>
<!-- .grid-parent -->

我想将绿色 div 与第一个蓝色 div 放在同一级别。我怎样才能做到这一点？有可能吗？

谢谢！

我想我找到了解决办法：

我加了

.something {
height: 1px;
overflow: visible;
}

我改变了中间的浮动 div：

.grid-606 {
display: inline-block;
float: none;
}

这里是完整的代码：https://jsfiddle.net/fLjs43x7/2/

Answer 1

我正在使用位置属性； 看到这个：-- 希望有帮助。

.grid-parent {
  display: block;
  width: 1000px;
  height: 300px;
  position:relative;
  overflow: hidden;
  
  background-color: red;
}

.grid-30,
.grid-60,
.grid-100 {
  display: block;
  float: left;
  height: 50px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.grid-100 {
  width: 1000px;
  background-color: yellow;
}

.grid-60 {
  width: 600px;
  background-color: blue;
}

.grid-30 {
  width: 300px;
  background-color: green;
  position:absolute;
  left:600px;
  top:60px;
}

<div class="grid-parent">

  <div class="something">
    <div class="something-else">
    
      <div class="grid-100">
      </div> <!--- .grid-100 -->
      
      <div class="grid-60">
      1
      </div> <!-- .grid-60 -->
      
    </div> <!-- .something-else -->
    
    <div class="grid-60">
    2
    </div> <!-- .grid-60 -->
  </div> <!-- .something -->
  
  <div class="grid-30">
  </div> <!-- .grid-30 -->
</div> <!-- .grid-parent -->