一千萬個為什麽

搜索

CSS/JS:在多行中均勻分布元素


你將如何在多行中均勻地傳播元素,例如:


wrapper div: <div style="text-align: center">
elements inside: <div style="display: inline-block;
                 padding-left: 10px; padding-right: 10px;">Element</div>

Instead of only having one element on the next line (wrapped):

Element 1        Element 2        Element 3        Element 4        Element 5
                          Element 6

It does this, spreading out the elements:

Element 1        Element 2        Element 3
Element 4        Element 5        Element 6

最佳答案

如果元素的寬度及其計數不固定,我會編寫一個代碼,根據情況生成自定義標記。

然而,它可能變得棘手,因為使用Web介質,很難(實際上不可能)計算文本塊的實際像素大小(無法知道瀏覽器使用什麽字體並獲得其指標)。

我建議事先決定列數(2或3),然後使用寬度設置為 50%33%text-的元素 - 將屬性與 center 對齊。

轉載註明原文: CSS/JS:在多行中均勻分布元素

猜你喜歡