CSS div 與其內容一樣寬
[英]CSS div as wide as its contents
問題描述
我仍然是一個 CSS 新手。 多年來，我一直使用嵌套表來管理我的布局，我知道所有 CSS 的人都會告訴我這是邪惡的。 多年來，我一直在玩弄 CSS，但從一開始我就無法讓它按照我想要的方式控制我的布局。
簡而言之，我想要的是一個 <div> ，它的寬度僅與它的內容一樣寬。 我不想設置它的大小。 我希望它的寬度與動態創建的內容一樣寬。
一張桌子完美地做到了這一點。 使用 <div> 它似乎總是做一些我想做的事情。 沒有“溢出”選項可以滿足我的要求。
經典示例是當我想創建一個整頁的列式布局時，左列包含導航鏈接，右側包含內容。 我希望左列與導航鏈接一樣寬。 不多也不少。 （導航鏈接不是 static；它們是動態創建的，並且可以隨時更改大小/長度）。 右邊的（“內容”）列應該是剩下的。 最重要的是，當我讓瀏覽器屏幕變寬或變窄時，我希望左欄仍然與導航鏈接一樣寬：不多也不少。 如果瀏覽器的寬度太窄，我希望內容根據需要自動換行。 在任何情況下，我都不希望文本被遮蓋或 go 超出定義的列。
簡而言之，我想要一個與表格一樣工作的 <div>，而不必使用表格。 當然，CSS 專家。 這可以做到....對嗎？ 我在其他論壇上問過這個問題，但還沒有得到可以接受的答案。
或者舉一個像這樣有點相關的簡單例子（也許這個很簡單）：
<ul style="background: orange;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
整個東西和瀏覽器屏幕一樣寬。 但我希望它只與最長的元素一樣寬。 如何使用 CSS 執行此操作？ 我可以把整個東西放在這樣的桌子里
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<ul style="background: orange;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</td></tr></table>
...它做我想要的。 如何使用 CSS 而不是使用那些“邪惡”表來做到這一點？
我嘗試了 miku 的示例。
它不起作用（對於我想要它做的事情）。
如果我把超長的導航線做成一個長字符串，比如
an&nbps;extra&nbps;long&nbps;navigation&nbps;link&nbps;goes&nbps;here&nbps;-&nbps;this&nbps;could&nbps;even&nbps;be&nbps;an&nbps;image!
我希望左側導航側根據需要擴展。 我不想要最大寬度。 使用上面的示例，超長的行將被“main” div 遮擋。
此外，“主” div 應該是瀏覽器寬度的 rest，在這種情況下，它僅與里面的文本一樣寬。
4 個解決方案
解決方案1
4 2011-08-10 17:33:06
不完全確定你的問題。 我了解，您希望擁有一個具有最大寬度的動態左側邊欄。 如果側邊欄中的某些文本太長，則應將其換行。 以下是我如何想象解決方案的代碼和屏幕截圖：
- 側邊欄將與那里最長的鏈接（或其他東西）一樣寬（在下面的示例中，那里有一個列表）
- 如果側邊欄中的某些內容超過了
max-width屬性指定的最大值（這里：200px），它將被包裝。 - 主要內容占據剩余的寬度。
通過overflow:hidden調整#main div 的大小（通過調整瀏覽器窗口的大小）。
<html><head></head><body>
<div id="sidebar-left"
style="background:#EFEFEF; max-width:200px; float:left">
<ul>
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Extra Long Navigation item,
that exceeds our limit of 200px - and should be wrapped</li>
</ul>
</div>
<div id="main" style="background:gray; overflow:hidden;">
<p>Hello there - main content goes here</p>
</div>
</body></html>
如果您不想要最大尺寸的側邊欄，只需刪除max-width屬性。
解決方案2
3 2011-08-10 17:26:51
使用<span>和display: inline-block 。
解決方案3
1 2011-08-10 17:30:19
在包含的div上設置display: inline-block 。
示例： http://jsfiddle.net/bVRVb/
發生的情況是div默認為display: block ，這意味着它們將占用盡可能多的水平空間，並使它們周圍的所有其他東西出現在它們的上方或下方。 使用inline-block ，它們仍然具有固定的形式，但會出現在它們周圍的東西旁邊，並且只占用它們需要的空間。
這是對block與inline-block的更全面的了解。
解決方案4
1 2011-08-10 21:25:49
非常簡單：浮動 div 容器並確保它沒有任何寬度屬性。 無論父母的寬度如何，它都會調整為最長的單詞。 因為它會按像素調整元素的大小，所以我添加了 10px 的邊距。 當然，最好讓容器來做。
在這里，為了演示目的，內聯：
<body style="width: 500px;">
<ul style="background: none repeat scroll 0pt 0pt orange; float: left;">
<li>one</li>
<li>two</li>
<li style="margin-right: 10px;">reallyreallyreallylongword</li>
</ul>
</body>
有沒有辦法讓父 div 在 CSS 中調整其子級內容的大小？
[英]Is there a way to get a parent div to resize with its child's contents in CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.