浮动 div 水平堆叠以填充父 div 并响应调整大小答案

【问题标题】：Floating divs stack horizontally to fill parent div and responsive resize浮动 div 水平堆叠以填充父 div 并响应调整大小
【发布时间】：2013-12-14 20:45:49
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： css wordpress plugins responsive-design

【解决方案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>

【讨论】：

在宽度上使用百分比，而不是在高度上使用百分比，会使我的图块倾斜。我需要在移动浏览器中缩小宽度和高度。设置宽度和高度的百分比会使图块消失。
只要设置一个最小高度和一个最大高度，你也可以使用最大宽度和最小宽度:)

【解决方案2】：

要解决瓷砖中心对齐问题，请删除 display: table-cell; 或在 style.css 文件的第 1480 行的 .art-layout-cell 类中添加 width: 1000px；
要使其具有响应性，请在图块中使用百分比宽度 OR/AND @media screen's like this。

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

【讨论】：

我并没有真正询问中心对齐。我需要在浏览器缩小时缩小图块的宽度和高度。
怎么样？是你的第一个问题！ @media 查询对您没有帮助？或者百分比宽度？