左の浮動小数点演算器が押し下げられる

赤いボックス（ブロックE）をブロックCの下に置いてブロックDの隣に置いて、同時にブロックCをブロックAと自体。左の浮動小数点演算器が押し下げられる

<body> 
    <article> 
    <div class="newsblockContainer"> 
    <div class="blockA"> 

    </div> 
    <div class="blockB"> 

    </div> 
    <div class="blockC"> 

    </div> 
    <div class="blockD"> 

    </div> 
    <div class="blockE"> 


    </div> 
</div> 
</article> 
      </body>

CSS ..すべての

.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; 
     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%; 

} 
body{ 
     background-color:black; 
} 
article{ 
     margin-left:12.5%; 
     width:75%; 
     height:100%; 
     background-color:rgba(14,14,14,1.00); 

    }

出典

2017-05-09 MA A

FIDDLE ::::: https://jsfiddle.net/j8hg3hf1/12/ –

ようこそStackOverflowへ。 [ツアー]を取ってください。よくある質問stackoverflow.com/help/how-to-ask、 [mcve]を作成してください。あなた自身の質問にコメントするのではなく、役に立つ情報を追加する目的で質問を編集してください。 – Yunnosch

まず、取って起動します。ここではImage は私のHTMLだ..私はそれを解決するためにさまざまな方法をしたが、私はなってしまったすべてが失敗し続けるましたStackOverflowの2分ツアーhere;真剣に、それはここで

働く更新されたバージョンだ:-)あなたをお手伝いします。私はブロックのいくつかを右に浮かせさせて、余白を再調整しました。それを確認してくださいhere。

.blockB { 
    /* Rest of the code */ 
    margin-right: 1%; 
    float:right; 
    /* Rest of the code */ 
}

そして：

.blockC { 
    /* Rest of the code */ 
    margin-top: 1%; 
    float: left; 
    /* Rest of the code */ 
} 

.blockD { 
    /* Rest of the code */ 
    margin-right: 1%; 
    background-color: #FFAE00; 
    float: right; 
    /* Rest of the code */ 
}

それらが必要ないたように私も（多分あなたは後で彼らと何かをやる。）、positionプロパティを削除し、私は使用することができことをお勧め絶対配置、またはフレックスボックスを使用することを検討してください。浮動小数点を使用するよりもユースケースに適しているかもしれませんが、それはあなたが望むものに依存しています。お手伝いをしてください。

出典

2017-05-09 19:37:11

ありがとうございました！助けを感謝します！ –

左の浮動小数点演算器が押し下げられる

答えて

関連する問題