将第三个浮点div放在与第一个div相同的级别

Question

我有下一个html结构，我无法改变它https://jsfiddle.net/fLjs43x7/：

HTML：

＆＃13;

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

我想将绿色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 -->