移動友好的CSS多列布局，不會像flex一樣吸吮

我實現了flex多列布局，在桌面上看起來很棒，然後在移動設備上查看它，並且它是完整的垃圾（全部一起scruntched在一起，完全忽略寬度參數）。與它一起玩了好幾個小時，到處都是互聯網，我說flex用於移動設備。不能被黑客正確。移動友好的CSS多列布局，不會像flex一樣吸吮

我試着玩列，但文本跨越它自己的下一列，這對我來說不起作用JSFiddle column code（注意：「DEBUG」字符串的位置，它將自身引入第3列在HTML這裏很清楚，我有它在第一列定義，收盤

</div>

）

什麼是體面的CSS多欄佈局爲移動設備，限制內容的特定列內？

來源

2015-06-22 NIX

你試過[bootstrap]（http://getbootstrap.com/）嗎？它會爲您節省數小時的設計。 –

@EricMartinez我更喜歡用框架的方式學習它，而不是學習框架。另外，我不是一個向用戶拋出20000行額外/備用代碼的忠實粉絲。 – NIX

通過將您的內容放入三個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/

我希望這是你所需要的。

來源

2015-06-22 23:05:39 user2671295

像冠軍一樣工作！ – NIX

移動友好的CSS多列布局，不會像flex一樣吸吮

回答

相關問題