如何將最大寬度設置爲「display：table-cell」元素？

我的目標是獲得應根據瀏覽器窗口寬度進行縮放的側欄佈局。有些部分應該具有縮放寬度，其他部分應該具有靜態寬度，並且一些部分應該縮放但具有最小/最大寬度。（它如果一些將擴大內基於內容也將是巨大的）如何將最大寬度設置爲「display：table-cell」元素？

的HTML：

<div id="table"> 
    <div id="row"> 
    <div id="sidebar">at least 90px width<br/>not more than 130px width</div> 
    <div id="content">scale</div> 
    <div id="logo">should be static 60px</div> 
    <div id="sidebar2">at least 90px width</div> 
    </div> 
</div>

和CSS：

#table { 
display: inline-table; 
width: 100%; 
} 

#row { 
display: table-row; 
} 

#table #row div { 
display: table-cell; 
} 

#sidebar { 
width: 10%; 
min-width: 90px; 
max-width: 130px; 
} 

#content { 
width: 70%; 
} 

#logo { 
min-width: 60px; 
background-color: #FAB6B8; 
} 

#sidebar2 { 
min-width: 90px; 
width: 20%; 
}

的問題：

看來max-width對dom-指定display:table-cell的元素。（我猜）

我試圖與另一個div工作，跨越實際的單元格。這會導致問題，即單元格完美縮放，但內容div的左側不會粘到第一個側邊欄。（同樣的問題，如果我把「最大寬度div」放入單元格內）

使用float: left layout也不起作用。（如果窗口太小，浮動會中斷;如果我使用div來保護它，則不會縮放）

有沒有辦法在不使用js的情況下解決此問題？
在#row中放入一個div，沒有其他CSS可以用於基於內容進行擴展的div。可悲的是，如果只有文字在每個單詞之後都會打破。我怎樣才能防止這種情況，並能夠設置最大寬度並隱藏溢出？

來源

2014-01-14 DepressedNOF

請問爲什麼你需要顯示：table-cell？無論你使用的是什麼，都可能有不同的做法。 –

感謝您的評論，顯示：table-cell是必需的，因爲我無法使用float：left在水平行中獲取多個元素。我想除了這種方法之外，沒有其他辦法可以實現這一點。 – DepressedNOF

浮動：左邊會把所有東西都排成一排。以及顯示：內聯。 –

我找到了答案由我自己：

，關鍵是要絕對寬度適用於元素，應該得到最大寬度。這並不完美，因爲具有絕對寬度的div不會縮放，直到具有相對寬度的div達到最小寬度，但我想這是唯一的方法。

太簡單了。不好意思...

來源

2014-01-15 20:09:47 DepressedNOF

如何將最大寬度設置爲「display：table-cell」元素？

回答

相關問題