向左浮动使我的盒子跳下来

Question

我想把红色方框（方块E）放在方块C下方和方块D旁边，同时在方块A和它自身之间以1％的边距向上移动方块C。我尝试过不同的策略但从未能解决问题。

这是我的代码：

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

Answer 1

对于需要移动的位置，请使用绝对定位而不是相对定位。您需要在px，％等中包含该位置的属性。

编辑： 您可以保持相对定位并使用top属性。 1％的利润率可能会有点棘手，但它肯定会接近它。

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

}

这与将.blockC更改为顶部：-10px将图像更改为此。

以下是图片显示方式的链接 https://i.imgur.com/zLhoPgb.png

Answer 2

检查一下。有效。如果您需要修改，请发表评论。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;