浮動左邊不會工作 - 框被推下來

我想把紅色方塊（方塊E）放在方塊C下方和方塊D旁邊，同時在方塊A和方塊A之間移動方塊C的上限爲1％本身。我有不同的方法來解決這個問題，但所有我結束了持續失敗.. Image 這裏是我的HTML：浮動左邊不會工作 - 框被推下來

<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

首先，通過採取啓動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性質，因爲他們沒有必要（也許你會以後做一些與他們）。我建議你使用絕對定位，甚至可以考慮使用Flexbox。無論如何，它們可能比使用浮動塊更適合您的用例，但這取決於您想要的內容。希望它有幫助。

來源

2017-05-09 19:37:11

謝謝你！感謝幫助！ –

浮動左邊不會工作 - 框被推下來

回答

相關問題