移动端的响应式元素布局

Question

对不起，如果这是一个简单的问题，但我花了将近几天的时间仍然无法解决它。 我有一个 wordpress 网站，并且正在使用 4 列设计来展示我们的服务。 在桌面视图中，它们按我希望的方式显示（彼此相邻），但在移动视图中，它们不是。我更改了列设置，但仍然没有运气。 这是图片，如果它有帮助。 请问有什么想法吗？

desktop view

mobile view

Answer 1

使用flexbox 来实现它。谢谢

.parent{
  display:flex;
  flex-wrap: wrap;
}

.child{
  border: 2px solid black;
  height:100px;
  width:100px;
  margin: 5px
}

<div class="parent">
    <div class="child">
      
  </div>
    <div class="child">
      
  </div>
    <div class="child">
      
  </div>
    <div class="child">
      
  </div>
</div>