Android 移动友好的CSS多栏布局，将内容限制在特定栏中

我实现了一个flex多列布局。它在我的桌面上看起来很棒。在一个移动设备上，它被挤在一起，完全忽略了宽度参数

我尝试过使用列，但文本本身会跨越到下一列，这对我来说不起作用（注意：“DEBUG”字符串的位置，它会自动进入第三列，在HTML中，我在第一列中，在结尾的

中定义了它）

---

什么是适合移动设备的CSS多列布局，它将内容限制在特定列？

您可以通过将内容放在三个div中，然后使用CSS定义div（列）的宽度和边距来更好地控制内容

例如，这可能是您的CSS：

.oneThird {
    float: left;
    margin-right: 2%;
    width: 32%;
}
.gridLast {
    margin-right: 0;
}

这是您的HTML：

<div class="oneThird">
    <p>Column Content 1</p>
</div>
<div class="oneThird">
    <p>Column Content 2</p>
</div>
<div class="oneThird gridLast">
    <p>Column Content 3</p>
</div>

栏目内容1

栏目内容2

栏目内容3

下面是一个JSFIDLE：

---

我希望这就是你需要的。

你试过了吗？它肯定会为你节省设计的时间。@EricMartinez我更喜欢用框架的方式来学习它，而不是学习框架。此外，我不太喜欢向用户抛出20000行额外/备用代码。