如何使用css列將列寬調整爲內容大小？

我使用CSS列（不是表）來創建跨3列跨越列表，像這樣：如何使用css列將列寬調整爲內容大小？

HTML

<ul> 
    <li>- Item 1 - this is the item's name here.</li> 
    <li>- Item 2</li> 
    <li>- Item 3</li> 
    <li>- Item 4</li> 
    <li>- Item 5</li> 
    <li>- Item 6</li> 
    <li>- Item 7</li> 
    <li>- Item 8</li> 
</ul>

CSS

ul { 
    column-count: 3; 
    max-width: 40rem; 
}

如何顯示

但是，所有列的寬度相等，這會導致它們之間的間距不同。我如何調整css列以獲得像這樣的內容，其中每列的寬度取決於內容？

我想要實現：

謝謝！

編輯：我要指出，我需要使用CSS列，因爲正在通過一個CMS動態生成的項目，這些列表，所以想找到一個純粹的CSS解決方案，如果能夠避免引入Javascript功能來操縱DOM。謝謝。

來源

2017-01-23 hidace

我剛剛發現，這也許已經在這裏http://stackoverflow.com/questions/23794713/flexbox-two-fixed-width-columns-one-flexible回答，使用'彎曲生長「和」柔縮「風格 –

你無法通過列來實現這一點。CSS列專爲在相同列之間流動的內容而設計。 – makshh

僅供因爲它的相關信息是隻有在這個時候實驗：

這可以在few browsers進行測試，

又見http://caniuse.com/#search=grid

等的講解https://css-tricks.com/snippets/css/complete-guide-grid/

所以display:grid可以幫助哪天：但儘管如此，佈局噴灑每行

ul { 
 
    padding: 1em ; 
 
    margin: 2em; 
 
    border: solid 1px; 
 
    list-style-type: none; 
 
    display: grid; 
 
    grid-template-columns: auto auto 1fr; 
 
    grid-gap: 0 2em; 
 
}

<ul> 
 
    <li>- Item 1 - this is the item's name here.</li> 
 
    <li>- Item 2</li> 
 
    <li>- Item 3</li> 
 
    <li>- Item 4</li> 
 
    <li>- Item 5</li> 
 
    <li>- Item 6</li> 
 
    <li>- Item 7</li> 
 
    <li>- Item 8</li> 
 
</ul>

如果您使用服務器端或javascript常規行算你的項目，那麼你可能會強制它們按列進行噴塗：（例如通過js/jQuery：http://codepen.io/gc-nomade/pen/BpZZQW播放並添加/刪除lis）

ul { 
 
    padding: 1em 1em 1em 4em; 
 
    margin: 2em; 
 
    border: solid 1px; 
 
    list-style-type: none; 
 
    display: grid; 
 
    grid-gap: 0 2em; 
 
    padding:1em ; 
 
    grid-template-columns: 0 auto auto 1fr;/* last one set to use all room left */ 
 
    grid-auto-flow: column; 
 
} 
 

 
/* span a first-element throgh all rows , to be injected and updated from server side or via javascript on the fly */ 
 
ul:before { 
 
    content: ''; 
 
    grid-column: 1; 
 
    /* short hand : grid-row:1/4;*/ 
 
    grid-row-start: 1; 
 
    grid-row-end: 4;/* value to updated to match row numbers + 1 */ 
 
}

<ul> 
 
    <li>- Item 1 - this is the item's name here.</li> 
 
    <li>- Item 2</li> 
 
    <li>- Item 3</li> 
 
    <li>- Item 4</li> 
 
    <li>- Item 5</li> 
 
    <li>- Item 6</li> 
 
    <li>- Item 7</li> 
 
    <li>- Item 8</li> 
 
</ul>

來源

2017-01-23 20:19:51

如何使用css列將列寬調整爲內容大小？

回答

相關問題