我还是一个CSS新手.多年来我一直使用嵌套表管理我的布局,我知道所有CSS人都会告诉我它是邪恶的.我已经习惯了很多年的CSS,但从一开始我一直无法按照我想要的方式控制我的布局.
简而言之,我想要的是一个只有内容宽的<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应该是浏览器宽度的其余部分,在这种情况下,它只与文本内部一样宽.