####

Question

所以我有一个简单的图像缩略图着陆页，如：

<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>

在我的网站上，4在桌面上并排显示。如何强制它们在移动视图中以二行显示？

所以：桌面：

####

移动：

##

Answer 1

您必须添加媒体查询，以便在指定的断点处将div s的宽度设置为50％。

＆＃13;

@media (max-width: 400px) {
  div {
    width: 50%;
  }
}

＆＃13;

<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
  <img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>

＆＃13;

参考：MDN - CSS media queries

Answer 2

如果您对clear:both没问题，请继续使用此解决方案。

Updated Demo 它会让你在那个地方休息。我已经使用了自定义媒体查询并根据你的需要进行了更改。希望它会有所帮助..

在移动视图上将div推送到新行

####

##

##

2 个答案: