移动友好的 CSS 多列布局，将内容限制在特定列答案

【问题标题】：Mobile friendly CSS multi column layout that restricts content to a specific column移动友好的 CSS 多列布局，将内容限制在特定列
【发布时间】：2015-06-22 22:33:56
【问题描述】：

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

我尝试使用列，但文本会自行跨越到下一列，这对我不起作用JSFiddle column code（注意：“DEBUG”字符串的位置，它会将自身放入第三列，其中在 HTML 中非常清楚，我在第一列中定义了它，在结尾 </div>)

对于将内容限制在特定列的移动设备，什么是体面的 CSS 多列布局？

【问题讨论】：

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

标签： android html css flexbox

【解决方案1】：

您可以通过将内容放在三个 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>

这是一个 JSFiddle： http://jsfiddle.net/wsqLagfu/

我希望这是你需要的。

【讨论】：