Question

我实现了一个灵活的多列布局，让它在我的桌面上看起来很棒，然后在移动设备上查看它并且它是完整的垃圾（所有的一起捣乱，完全忽略宽度参数）。我玩了几个小时，无处不在，我上网说灵活性吸引移动设备。无法被黑客攻击。

我尝试过使用专栏，但是文字会自动转到自己的下一栏，这对我不起作用JSFiddle column code（注意：＆＃的位置） 34; DEBUG＆＃34;字符串，它将它自我引入第3列，非常清楚地在HTML中，我在第一列中定义了它，在结束时

</div>

）

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

Answer 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/

我希望这是你需要的。

移动友好的CSS多列布局，不像flex那样糟糕

1 个答案: