移动友好的CSS多列布局，可将内容限制为特定列

Question

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?

Answer 1

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.