Question

我想把红色方框（方块E）放在方块C下方和方块D旁边，同时在方块A和它自身之间以1％的边距向上移动方块C。我有不同的方法来解决它，但我最终得到的一切都是失败的...... 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);

    }

Answer 1

首先，首先参加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 。它们可能比使用浮动更适合您的用例，但这取决于您的需求，无论如何。希望它有所帮助。

浮动左不会工作 - 箱子被推倒

1 个答案: