我想把红色方框(方块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/
答案 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)
检查一下。有效。如果您需要修改,请发表评论。
.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;