CSS列寬：「寬按需」和「不管剩下的」

我有一個網頁，看起來像：CSS列寬：「寬按需」和「不管剩下的」

<table> 
    <tr> 
     <td style=white-space:nowrap> 
      lots of content... 
     </td> 
     <td> 
      some more content 
     </td> 
    </tr> 
</table>

這工作得很好。左列需要儘可能多的寬度，而右列則佔用儘可能多的寬度。右欄包含很多自動換行。

我想在純CSS中做到這一點，因爲從語義上講沒有任何表格。但是，我所嘗試的任何一項都需要硬編碼寬度，或者將右列放在左列下方。有沒有辦法？

來源

2013-05-14 dspeyer

實際上，對於'width'會解決你的問題'最小content'值 - 一個恥辱，它仍然是實驗性的。 http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent – Terry 2013-05-14 16:40:31

浮動左列，並使右列不浮動overflow:hidden。這會導致右列自動填充剩餘寬度，而不會纏繞左列下方。

JSFiddle Demo

.column1 { 
    float: left; 
} 
.column2 { 
    overflow: hidden; 
}

這招除了IE6的所有瀏覽器（這不應該在這一點沒關係）測試的罰款。

來源

2013-05-14 16:31:25

工作。儘管如此，「溢出」如何做到這一點？難道它不是爲了處理不符合盒子的內容嗎？ – dspeyer 2013-05-14 16:36:57

@dspeyer：這裏有一篇文章描述了這是如何工作的：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats – 2013-05-14 16:39:22

您可以使用CSS display:table-cell規則來模擬表格佈局。

<div style=white-space:nowrap>lots of content... lots of content... lots of content... lots of content... lots of content... lots of content... lots of content...</div> 
<div>some more content</div> 

div { 
    display:table-cell; 
    vertical-align:middle; 
}

jsFiddle example

來源

2013-05-14 16:32:17 j08691

CSS列寬：「寬按需」和「不管剩下的」

回答

相關問題