移动友好的CSS多列布局，可将内容限制为特定列 [英] Mobile friendly CSS multi column layout that restricts content to a specific column

问题描述

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

我尝试使用列，但文本本身会自行扩展到下一列，这对我不起作用</div>中定义了它)

什么是用于移动设备的，将内容限制到特定列的合适的CSS多列布局?

解决方案

通过将内容放在三个div中，然后使用CSS定义div(列)的宽度和边距，您可以更好地控制内容. /p>

例如，这可能是您的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/

我希望这是您所需要的.

I implemented a flex multi column layout. It looked great on my desktop. On a mobile device it was all scruntched together, ignoring width parameters completely.

I tried playing with columns, but text spans itself to the next column on it's own, which will not work for me JSFiddle column code (note: the position of the "DEBUG" string, it throws itself into the 3rd column where very clearly in the HTML, I have it defined in the first column, within the closing </div>)

What is a decent CSS multi-column layout for mobile devices that restricts content to a specific column?

解决方案

You can have more control of your content by placing your content in three divs and then use CSS to define the width and margins of your divs (columns).

For Example this could be your CSS:

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

And this your 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>

Here is a JSFiddle: http://jsfiddle.net/wsqLagfu/

I hope this is what you need.

这篇关于移动友好的CSS多列布局，可将内容限制为特定列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！