简而言之,我想要的是< div>那只会和它的内容一样宽.我不想设置它的大小.我希望它的内容与动态创建的内容一样宽泛.
一个表完美地完成了.使用< div>它似乎总是像我想要的那样做.没有我想要的“溢出”选项.
典型的例子是当我想创建一个全页的柱状布局时,左列包含导航链接,右边包含内容.我希望左栏与导航链接一样宽.不多不少. (导航链接不是静态的,它们是动态创建的,可以随时改变大小/长度).而右(“内容”)列应该是剩下的.最重要的是,当我使浏览器屏幕更宽或更窄时,我希望左侧列可以与导航链接完全一样宽：没有更多,更少.如果浏览器的宽度太窄,我希望内容根据需要自动换行.在任何情况下,我不希望文本被遮蔽或者不在定义的列之外.
简而言之,我想要一个< 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遮蔽.
此外,“main”div应该是浏览器宽度的其余部分,在这种情况下,它的宽度只能与文本的宽度一样宽.
解决方法
>侧边栏将与最长的链接(或某事)一样宽(在下面的示例中,有一个列表)
>如果侧边栏中的某些内容超出了max-width属性(这里：200px)指定的最大值,那么它将被包装.
>主要内容占用剩余的宽度.
调整#main div的大小(通过调整浏览器窗口大小)可以通过overflow:hidden进行.
<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>
