浮动左边不会工作 - 框被推下来

我想把红色方块（方块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

谢谢你！感谢帮助！ –

浮动左边不会工作 - 框被推下来

回答

相关问题