0
我对媒体查询很熟悉,但是当涉及到不同大小和形状的多个div时,我完全丢失了。所以,如果有人愿意带我走过这个过程,那将是美好的。或者只是给我一些指点,这就是我真正要求的!现在我有7个独立的div,全部定位我想要的,只是不知道如何保持它响应不同的设备。媒体查询和使网格系统响应
.wrapper {
max-width: 900px;
margin: 0 auto;
}
.wrapper > div {
background-color: lightcoral;
padding: 1em;
color: white;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1;
grid-row: 1;
}
.one:hover {
opacity: .6;
}
.two:hover {
opacity: .6;
}
.three:hover {
opacity: .6;
}
.two {
grid-column: 2;
grid-row: 1 /3;
}
.two:hover {
opacity: .6;
}
.three {
grid-column: 1;
grid-row: 2 /3;
}
.four {
grid-column: 3;
grid-row: 1/4;
}
.five {
grid-column: 1 /3;
grid-row: 3;
}
.six {
grid-column: 2/4;
grid-row: 4 ;
}
.seven {
grid-column: 1;
}
<div class="wrapper">
<div onclick="location.href='http://www.google.com';" style="cursor: pointer;" class="one"><div class="oneimage"></div><div class="onetext">Title here</div></div>
<div onclick="location.href='http://www.google.com';" style="cursor: pointer;" class="two">Title here</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
</div>
谢谢你给谁决定帮助我提前!
我如何才能让他们堆叠在一起,然后使用媒体查询? – johnstont05
我编辑了我上面的答案。 –
完美!最后一件事......我怎么能在每个盒子里获得不同的图像? – johnstont05