float left使我的盒子跳下來

我想在塊C下面和塊D旁邊放置紅色框（塊E），同時在塊A和塊本身之間移動BLOCK C，保留1％的餘量。我嘗試過不同的策略，但從來沒有能夠解決問題。 float left使我的盒子跳下來

這裏是我的代碼：

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

來源

2017-05-09 MA A

的代碼片段是錯誤的，一定要檢查小提琴代替：/ –

如果代碼片段是錯誤的，那麼請修復它。 –

對於需要移動的人使用絕對定位而不是相對定位。您需要包含px，％等位置的屬性。

編輯：您可以保留相對定位並利用top屬性。 1％的保證金事情可能會有點棘手，但它肯定可以接近它。

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

}

這與改變.blockC頂部沿：-10px形象改變了這一點。

下面就以圖像的顯示 https://i.imgur.com/zLhoPgb.png

來源

2017-05-09 17:10:49 MCT

提供更多細節，或展示如何在代碼中實現此功能，沒有更多上下文，您的答案就無用。 – Adam

不太確定如何推薦屬性和單位沒有用，但無論我會進一步演示。 – MCT

看看這個鏈接。有效。如果您需要修改，請評論。

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

來源

2017-05-10 05:11:23 Nimish

float left使我的盒子跳下來

回答

相關問題