我有一个网格布局,是几个副本的副本,附带图像(link to jsfiddle)。
<div class="story-body">
<div class="body-copy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
</div>
<div class="regular-photo">
<img src="http://placehold.it/500x500">
</div>
<div class="body-copy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
</div>
<div class="regular-photo">
<img src="http://placehold.it/500x500">
</div>
</div>
它在桌面上完美显示 - 图像排列在随附副本块顶部的旁边。问题是,在移动设备上,图像显示在正文复制部分之后,这是有意义的,考虑到我以这种方式组织HTML。
.story-body {
display: grid;
grid-template-columns: 50% 50%;
grid-auto-flow: row;
}
.body-copy {
justify-self: center;
max-width: 80%;
}
.regular-photo {
justify-self: left;
}
@media screen and (max-width: 500px) {
.story-body {
grid-template-columns: 100%;
}
.regular-photo {
justify-self: center;
}
}
有没有办法在qazxsw poi divs之前定位qazxsw poi divs而不必重新组织HTML?
我对你的代码进行了一些重构。劳驾。但这是解决方案。您可以将.regular-photo
与包含.body-copy
的类的子项一起使用
order property
display: grid
您可以明确声明.story-body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
justify-self: center;
}
.story-body p {
justify-self: center;
max-width: 80%;
}
.regular-photo {
justify-self: left;
display: inline-block;
width: 100%;
height: auto;
}
@media screen and (max-width: 500px) {
.story-body {
grid-template-columns: 1fr;
}
.photo1 {
order: 1;
}
.p1 {
order: 2;
}
.photo2 {
order: 3;
}
.p2 {
order: 4;
}
}
并相应地放置每个div。
<div class="story-body">
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
<div class="regular-photo photo1">
<img src="http://placehold.it/500x500">
</div>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
<div class="regular-photo photo2">
<img src="http://placehold.it/500x500">
</div>
</div>
grid-template-areas
fiddle