對齊含量爲每行

我努力實現以下目標：對齊含量爲每行

1. max 2 cols, x rows 
2. list item will wrap - if hide current item then next item will take its place 
3. buttons must be aligned in both columns 
4. there can be whitespace between the content and the button 
5. no CSS3

目前一切看起來除了在「BBBBBBBBBB」內容的第二位好 - 鏈接：http://jsfiddle.net/jstime/t7319mpw/

圖像來幫助解釋： enter image description here

來源

2014-08-27 Mercury

不知道文字是動態的，但在這裏是用JS http://jsfiddle.net/t7319mpw/5/ – Dan 2014-08-27 19:46:54

浮啓動或內嵌塊不會將每個li設置爲相同的高度。顯示：flex可能有助於年輕的瀏覽器http://jsfiddle.net/t7319mpw/9/ – 2014-08-27 19:59:03

@丹高度的方法實際上在這裏效果很好，但有延遲，實際上可以看到元素移動 – Mercury 2014-08-27 20:03:49

如果你想依靠CSS只有你可以設置vertical-align:top;，然後給文本容器一個最小和最大高度。爲了對齊顯示：inline-block;你也可以申請

body{ text-align:center; }

隨後的CSS規則的其餘部分：

#listofthings { 
    background-color:gray; 
} 

#listofthings li { 
    width: 300px; 
    display: inline-block; 
    vertical-align:top; 
} 

.text-center div{ 
    min-height:160px; 
    max-height:160px; 
    overflow:hidden; 
}

DEMOhttp://jsfiddle.net/t7319mpw/10/

來源

2014-08-27 19:59:08

最大高度限制文本顯示，如果有更多的文本？最小高度強加一個高度可能不適合，如果左右兩邊的文字少了，怎麼辦？ – Dan 2014-08-27 20:02:20

我知道，但是這只是他想限制文本高度爲160px。如果你注意到我應用了overflow：hidden;對它：） – 2014-08-27 20:06:11

如果我必須動態地限制文本內容，我肯定會使用js。這一切都取決於需求，在這種情況下，可能已經足夠用CSS解決方案了。 – 2014-08-27 20:07:12

顯示：彎曲過度使用可能有助於對CSS的唯一的測試： http://jsfiddle.net/t7319mpw/9/

#listofthings { 
    background-color:gray; 
    display:flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
} 
#listofthings li { 
    width: 300px; 
    /* fall back for older browser */ 
    display:inline-block;vertical-align:top;/* middle or top or else */ 
    display:flex; 
} 

#listofthings li >div { 
    display:flex; 
    flex-direction:column; 
    align-self:stretch; 
} 
div.text-center > div { 
    flex:1 
}

你有了第一次的評論似乎是一個很好的提示通過JS來實現這一點，如果

來源

2014-08-27 20:01:13

添加一些項目來檢查行爲：http://jsfiddle.net/t7319mpw/11/ – 2014-08-27 20:03:49

對齊含量爲每行

回答

相關問題