我有6张图片包裹在外部div
中。
我想在移动版本中看到每行2张图像,因此应该有3列,每行2张图像。
我有这个HTML:
* {
box-sizing: border-box;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.picture-box {
width: 70%; /* limit screen width - max width could have been used aswell */
margin: 0 auto; /* center content */
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.ring {
padding: 10px;
text-align: center; /* Center ring div */
}
@media screen and (min-width: 1200px) {
.ring {
width: 25%;
}
}
@media screen and (max-width: 1199px) {
.ring {
width: 33.33%;
}
}
@media screen and (max-width: 768px) {
.ring {
width: 50%;
}
.picture-box {
width: 100%;
}
}
.thumb {
display: inline-block;
max-width: 200px;
padding: 10px;
border: 1px solid blue;
}
<div class="picture-box">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
Working JSFiddle Example
我试图将
flex-direction
从row
更改为column
,但这没有帮助。我可能需要为它们写宽度,但不知道如何,现在我无法将它们变成一列。
我该如何解决?
最佳答案
这是你想要的?
我像您在问题中所问的那样使用width
-这是一种实现方法。
这样,您可以控制要在每个断点中显示多少个框(.ring's
)。
* {
box-sizing: border-box;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.picture-box {
width: 70%; /* limit screen width - max width could have been used aswell */
margin: 0 auto; /* center content */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ring {
padding: 10px;
text-align: center; /* Center ring div */
}
@media screen and (min-width: 1200px) {
.ring {
width: 25%;
}
}
@media screen and (max-width: 1199px) {
.ring {
width: 33.33%;
}
}
@media screen and (max-width: 768px) {
.ring {
width: 50%;
}
.picture-box {
width: 100%;
}
}
.thumb {
display: inline-block;
max-width: 200px;
padding: 10px;
border: 1px solid blue;
}
<div class="picture-box">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
JSFiddle example