Question

我试图在shopify主题中创建一个响应式布局，如下所示：http://postimg.org/image/7r6jo647l/。我已经尝试了一切，但无法获得理想的结果。我正在转向reddit上更聪明的头脑寻求帮助。任何帮助都会受到赞赏，我将图像命名为frustrating.jpg，几乎说明了一切： - /

我不是在找人做咕噜咕噜的工作，只是指着我正确的方向......在我秃顶撕裂我的头发之前。

Answer 1

使用Bootstrap很容易 - 下面将为图像创建4个相邻的div - 这些将在中等到大尺寸的场景中水平堆叠在一行4中，在小屏幕上两行相邻的两个图像并垂直堆叠在移动（xs）屏幕上。

// 4个相邻图像的行

<div class="row">
    <div class="col-md-3 col-sm-6">
      <img src="smallImage-1.jpg" alt="Small Image1">
    </div>
    <div class="col-md-3 col-sm-6">
      <img src="smallImage-2.jpg" alt="Small Image2">
    </div>
    <div class="col-md-3 col-sm-6">
      <img src="smallImage-3.jpg" alt="Small Image3">
    </div>
    <div class="col-md-3 col-sm-6">
      <img src="smallImage-4.jpg" alt="Small Image5">
    </div>
</div>

Answer 2

如果您的主题需要容纳可变数量的图片，请使用css来管理：

一组最小的显示：flex display：图像包装器的表

flex的小提琴是：

https://jsfiddle.net/xma6kbxa/

＆＃13;

.wrap, .wrap *{
 box-sizing:border-box;
}

.wrap{
  display:flex;
  margin-left:-5px;
  margin-right:-5px;
  clear:left;
  width:100%;
  border:1px solid blue;
 }
 .wrap .holder{
   margin:5px;
   }
  .wrap img{
    width:100%;
    height:auto;
  }
 }

＆＃13;

<div class="wrap">
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
</div>

<div class="wrap">
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>

＆＃13;

注意FWIW基本的flex支持非常广泛。 http://caniuse.com/#feat=flexbox

响应并排图像

2 个答案: