浮動小数点浮動小数点でボックスが下に飛ぶ

Question

赤いボックス（ブロックE）をブロックCの下に置いてブロックDの隣に置いて、同時にブロックCをブロックAとその間の1％のマージンで動かしたいと思います。私はさまざまな戦略で試しましたが、問題を解決することはできませんでした。

ここに私のコードです：

.newsblockContainer { 
 
    background-color: #000000; 
 
    width: 89.2%; 
 
    margin-left: 4vw; 
 
    margin-top: 3vw; 
 
    height: 73.3vw; 
 
    overflow: hidden; 
 
} 
 

 
.blockA { 
 
    width: 59%; 
 
    height: 27vw; 
 
    background-color: #FFAE00; 
 
    margin-left: 1%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.blockB { 
 
    width: 38%; 
 
    height: 34vw; 
 
    background-color: #FFAE00; 
 
    margin-left: 1%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.blockC { 
 
    width: 59%; 
 
    height: 23vw; 
 
    margin-left: 1%; 
 
    float: left; 
 
    background-color: #FFAE00; 
 
    margin-top: -9.45%; 
 
    position: relative; 
 
} 
 

 
.blockD { 
 
    height: 36.7vw; 
 
    width: 38%; 
 
    margin-left: 1%; 
 
    background-color: #FFAE00; 
 
    float: left; 
 
    margin-top: 1%; 
 
    position: relative; 
 
} 
 

 
.blockE { 
 
    height: 15vw; 
 
    background-color: red; 
 
    position: relative; 
 
    margin-top: 1%; 
 
    width: 59%; 
 
    margin-left: 1%; 
 
}

<div class="newsblockContainer"> 
 
    <div class="blockA"> 
 
    block A 
 
    </div> 
 
    <div class="blockB"> 
 
    block B 
 
    </div> 
 
    <div class="blockC"> 
 
    block C 
 
    </div> 
 
    <div class="blockD"> 
 
    block D 
 
    </div> 
 
    <div class="blockE"> 
 
    block E 
 
    </div> 
 
</div>

任意の提案？ フィドル：https://jsfiddle.net/j8hg3hf1/1/

Answer 1

移動が必要なものの相対的な配置ではなく、絶対的な位置決めを使用します。場所の属性をpx、％などで含める必要があります。

編集： 相対的な位置を保持して、top属性を利用できます。 1％のマージンはこの方法でややこしいかもしれませんが、確かにそれを近似することができます。上部に.blockCを変えると共に

.blockE{ 
height: 15vw; 
background-color: red; 
position: relative; 
top: 308px; 
margin-top: 1%; 
width: 59%; 
margin-left: 1%; 

}

これ：-10pxはこれに画像を変更します。ここで

は画像が https://i.imgur.com/zLhoPgb.png

Answer 2

がこれをチェックしてください表示方法へのリンクです。出来た。変更が必要な場合は、コメントしてください。

.newsblockContainer { 
 
    background-color: #000000; 
 
    width: 89.2%; 
 
    margin-left: 4vw; 
 
    margin-top: 3vw; 
 
    height: 73.3vw; 
 
    overflow: hidden; 
 
} 
 

 
.blockA { 
 
    width: 59%; 
 
    height: 27vw; 
 
    background-color: green; 
 
    margin-left: 1%; 
 
    margin-top: 1%; 
 
    float: left; 
 
} 
 

 
.blockB { 
 
    width: 38%; 
 
    height: 34vw; 
 
    background-color: blue; 
 
    margin-left: 1%; 
 
    margin-top: 1%; 
 
    margin-right: 1%; 
 
    float: right; 
 
} 
 

 
.blockC { 
 
    width: 59%; 
 
    height: 23vw; 
 
    margin-left: 1%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    background-color: pink; 
 
} 
 

 
.blockD { 
 
    height: 36.7vw; 
 
    width: 38%; 
 
    margin-left: 1%; 
 
    background-color: #FFAE00; 
 
    float: right; 
 
    margin-top: 1%; 
 
    margin-right: 1%; 
 
    position: relative; 
 
} 
 

 
.blockE { 
 
    height: 15vw; 
 
    background-color: red; 
 
    margin-top: 1%; 
 
    width: 59%; 
 
    float: left; 
 
    margin-left: 1%; 
 
}

<div class="newsblockContainer"> 
 
    <div class="blockA">A</div> 
 
    <div class="blockB">B</div> 
 
    <div class="blockC">C</div> 
 
    <div class="blockD">D</div> 
 
    <div class="blockE">E</div> 
 
</div>