我尝试使用边距来创建白色空格。但是,它不适用于第一个foreach (var n in newItemValues)
{
Item item = oldItems.FirstOrDefault(x => x.Id == n.Id);
if (item != null)
{
n.field1 = item.field1;
n.field2 = item.field2;
}
}
,因为它有自己的高度和边距[%]。
<div>
.block {
height: 270px;
width: 47%;
margin: 1.5%;
display: block;
float: left;
}
.blockbig {
width: 97%;
margin: 1.5%;
height: 540px;
display: block;
float: left;
}
.blockw {
width: 97%;
margin: 1.5%;
height: 270px;
display: block;
float: left;
}
.rectagle {
height: 550px;
width: 47%;
margin: 1.5%;
display: block;
float: left;
}
.row1 {
width: 50%;
float: left;
}
@media (max-width: 1160px) {
.container {
width: 90%;
}
}
@media (max-width: 900px) {
#b4 {
clear: both;
}
.block {
width: 28.83%;
}
}
我的尝试看起来像这样:
如果它有回应,我会很高兴 这是template,我必须转换。
答案 0 :(得分:0)
好的,我做到了。
* {
box-sizing: border-box;
}
#b1 {
display: block;
float: left;
width: 25%;
height: 540px;
}
#b2, #b3, #b4, #b6 {
display: block;
float: left;
width: 25%;
height: 270px;
}
#b5, #b7 {
display: block;
width: 50%;
height: 540px;
}
#b5 {
float: right;
}
#b7 {
float: left;
}
#b8 {
display: block;
float: left;
width: 50%;
height: 270px;
}
.row1 {
width: 100%;
}
@media (max-width: 1160px) {
.container {
width: 90%;
}
.container1 {
width: 100%;
}
@media (max-width: 850px) {
#b1, #b7 {
height: 428px;
}
#b2, #b3, #b4, #b6 {
height: 214px;
}
#b1, #b2, #b3, #b4, #b6 {
width: calc(100%/3);
}
#b5, #b8 {
height: 214px;
}
}
@media (max-width: 640px) {
#b1, #b2, #b3, #b4, #b6, #b7, #b5 {
width: 50%;
}
#b7 {
height: 214px;
}
#b8 {
width: 100%;
}
}
@media (max-width: 480px) {
#b1, #b2, #b3, #b4, #b6, #b7, #b5, #b8 {
width: 100%;
height: 400px;
}
}
&#13;
<div class="container1">
<div class="row1">
<div id="b1" class="inline-block" style="background-color: Beige;"><div class="block-content">1</div></div>
<div id="b2" class="inline-block" style="background-color: orange;"><div class="block-content">2</div></div>
<div id="b3" class="inline-block" style="background-color: black;"><div class="block-content">3</div></div>
<div id="b4" class="inline-block" style="background-color: orange;"><div class="block-content">4</div></div>
<div id="b6" class="inline-block" style="background-color: blue;"><div class="block-content">6</div></div>
<div id="b5" class="inline-block" style="background-color: Aquamarine"><div class="block-content">5</div></div>
<div id="b7" class="inline-block" style="background-color: black;"><div class="block-content">7</div></div>
<div id="b8" class="inline-block" style="background-color: Azure ;"><div class="block-content">8</div></div>
</div>
</div>
&#13;
但是,对于border-box,我不知道如何使用填充在所有块周围添加空格[10px]。