将引导程序移动布局从一列更改为两列

Question

我需要将此网站的移动版本 http://ovocne-destilaty.sk/ 的布局从一列更改为两列，我需要在行中有两个产品，而不是像现在这样的一个产品移动，或400％放大铬。 什么是最好的方法呢？

我试图这样做，目前是这样的：

int coordinates[5] [2] = {{x1,x2,x3,x4,x5},{y1,y2,y3,y4,y5}};

我更改了宽度：

.product-block {
    position: relative;
    width: 100%;
}

但它并没有相互堆叠，它只是在左侧，但现在宽度还可以，但我只需要每行两个产品。 谢谢

Answer 1

那是因为你没有考虑到空白区域。有几种方法可以摆脱这些。将您的html结构更改为：

<div class="product-block"></div><div class="product-block"></div>

彼此相邻，或

<div class="product-block"></div><!--
--><div class="product-block"></div>

在块之间添加空注释。

确保您也将.product-block的css设置为display: inline-block。

还有其他选项，例如，您将font-size设置为0到父容器，然后为内容添加正确的字体大小。