水平浮动div堆栈以填充父div和响应调整大小

Question

我已经创建了这个地铁磁贴滑块，但是我遇到了使其响应的问题。

这是我到目前为止创造的内容： http://bit.ly/189HN4Y

第一个问题是，瓷砖不会水平排列，除非我用宽度为1000px的div包围它。

第二个问题是，瓷砖没有响应。这可能是因为我必须在周围的div上设置像素宽度，但我认为可能还有其他问题导致这种情况。我希望瓷砖水平堆放，当我在移动设备中查看时，它会缩小。

我使用Tile Builder插件在Wordpress中创建了这些图块。如果您在移动设备中查看他们的示例，您会看到它缩小，这是我想要的行为： http://bit.ly/189HRSa

我一直在试图调整周围的div，我创建的小部件区域，甚至是主题，但是没有任何效果。希望另一双眼睛可以帮助我解决这个问题......

Answer 1

为了使其具有响应性，您需要按照我的示例将百分比的宽度定义为百分比：

http://jsfiddle.net/KAeak/1/

我只使用了一个包装器

<div class="wrapper">
    <div id="element-1">Test</div>
    <div id="element-2">Test</div>
    <div id="element-3">Test</div>
</div>

Answer 2

1. 要修复拼贴中心对齐问题，请删除display: table-cell;或仅在width: 1000px文件中的.art-layout-cell类{14}添加style.css;

2. 要使其响应，请使用图块中的百分比宽度OR / AND @media screen的{​​{3}}。

你说这个例子，他们使用<meta name="viewport" content="width=device-width, initial-scale=1.0 />使它缩小，但所有网站也缩小了。做出响应的最佳方式是@media screen的