css table/div格式化動態數目的單元格元素

我正在爲一個人的興趣創建一個HTML佈局。這個人可以選擇他們喜歡的1-20個愛好之間的任何地方。我想用3列的行來顯示它們。有沒有辦法做到這一點的div，這樣我就不必計算何時插入一個新的行？例如，如果我用一個表和用戶選取7個愛好，它看起來像：css table/div格式化動態數目的單元格元素

<tr><td>hobby 1</td><td>hobby 2</td><td>hobby3</td</tr> 
<tr><td>hobby 4</td><td>hobby 5</td><td>hobby6</td</tr> 
<tr><td>hobby 7</td><td></td><td></td</tr>

，我必須知道什麼時候（獲取數據時，在服務器端）插入新行。這有點痛苦 - 我打印了另外3列嗎？好的，結束行並開始一個新行。

我想是這樣的：

<div container> 
<div>hobby 1</div> 
<div>hobby 2</div> 
<div>hobby 3</div> 
<div>hobby 4</div> 
<div>hobby 5</div> 
<div>hobby 6</div> 
<div>hobby 7</div> 
</div>

其中輸出看起來像：

hobby1 hobby2 hobby3 
hobby4 hobby5 hobby6 
hobby7

容器將是固定大小（600像素），以及每個單元（200像素）

來源

2013-10-03 spock99

你有沒有試過只浮動divs左？你會想給divs一個一致的寬度，所以他們排成一行 – kinakuta

考慮容器的width: 600px.table，只需設定每個孩子的div width: 50%和float: left來實現你的需要，E ffect。更新以顯示3列，而不是2更新：

.table { 
    overflow: hidden; /** Contain floated elements **/ 
    width: 600px; 
} 

.table div { 
    float: left; 
    width: 33%; /** Or, a fixed pixel width of 200px; **/ 
}

Working example [更新10/4]

注

HTML

<div class="table"> <div>hobby 1</div> <div>hobby 2</div> <div>hobby 3</div> <div>hobby 4</div> <div>hobby 5</div> <div>hobby 6</div> <div>hobby 7</div> </div>

CSS小提琴的例子。

來源

2013-10-03 21:48:49 kunalbhat

浮動divs是最直接的解決方案，但OP是要求3列，而不是2 – kinakuta

這與更改。 table div to width：200px;爲3列而不是寬度：2列50％ – spock99

@kinakuta哈，好點。我已經更新了這個例子來反映這一點。 – kunalbhat

怎麼是這樣的：

#hobby{ 
     display:inline-block; 
     width: 197px; 
     max-width:197px; 
     height:200px; 
     max-height:200px; 
     margin:0px; 
     margin-top:2px; 
     overflow:hidden; 
}

http://jsfiddle.net/3m2NK/4/

來源

2013-10-03 21:50:08 Amoliski

我建議使用CSS列：

<!-- note that I've used 'container' as an id, rather than just free floating 
    the string within the tag (which would make it an invalid attribute) --> 
<div id="container"> 
    <div>hobby 1</div> 
    <div>hobby 2</div> 
    <div>hobby 3</div> 
    <div>hobby 4</div> 
    <div>hobby 5</div> 
    <div>hobby 6</div> 
    <div>hobby 7</div> 
</div>

隨着CSS：

#container { 
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
}

JS Fiddle demo。

顯然這個解決方案需要瀏覽器實現CSS多列布局模塊，可以使用CSS來測試給定的CSS屬性 - 值對的瀏覽器支持（雖然這有它的問題，甚至是不太很好地支持CSS比列，但是如果瀏覽器支持@supports()語法然後有一個非常好的機會，它也支持列：

/* defaults, to style if columns are not supported: */ 
#container { 
} 
#container div { 
    display: inline-block; 
    height: 1.5em; 
    line-height: 1.5em; 
    text-indent: 0.5em; 
    float: left; 
    width: 30%; 
    border: 1px solid #000; 
    margin: 0 0.5em 0.2em 0.5em; 
} 
/* testing for support for the given property-name and the property-value: */ 
@supports (-moz-column-count: 3) or (-ms-column-count: 3) or (-o-column-count: 3) or (-webkit-clumn-count: 3) or (column-count: 3) { 
    /* if the browser supports the property-name and property-value, the following styles are used, if the browser doesn't understand the syntax the rules are discarded */ 
    #container { 
     -moz-column-count: 3; 
     -ms-column-count: 3; 
     -o-column-count: 3; 
     -webkit-column-count: 3; 
     column-count: 3; 
    } 
    #container div { 
     /* unset the 'if not supported' styling */ 
     display: block; 
     float: none; 
     /* aesthetics, just because; adjust to taste */ 
     width: 90%; 
     margin: 0 auto 0.5em auto; 
    } 
}

JS Fiddle demo。

現在，上面我說@supports有'它的問題';引述埃裏克邁耶：

甲CSS處理器被認爲支持的聲明（由屬性和值的），如果它接受聲明（而不是丟棄它作爲解析錯誤）。如果處理器沒有以可用的支持水平實現給定的價值，那麼它不能接受聲明或聲明對它的支持。

所以在這第一句話，就是我們說的是「支持」的意思是「接受[A]宣言」，不砸在地板上的東西不承認。換句話說，如果一個瀏覽器解析一個property：value對，那麼它就可以作爲這個對的「支持」。請注意，這句話沒有說明解析後會發生什麼。據此，瀏覽器可能會有一個完全拙劣，部分且通常不可用的屬性值對實現，但識別行爲意味着有「支持」。

_{Reference: 'Unsupportable Promises', by Eric Meyer, accessed: 2013-10-03, 23:43 (British Summer Time)}

儘管如此，它似乎工作（在這種情況下，在Ubuntu 12.10在鉻28測試），但是，很顯然，潛在脆弱。

參考文獻：

來源

2013-10-03 22:44:14

css table/div格式化動態數目的單元格元素

回答

相關問題