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

时间:2017-05-09 17:02:49

标签: html css

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

这是我的代码:

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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

&#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;