gpt4 book ai didi

html - CSS div 与其内容一样宽

转载 作者:技术小花猫 更新时间:2023-10-29 12:41:45 25 4
gpt4 key购买 nike

我仍然是一个 CSS 新手。多年来,我一直使用嵌套表格来管理我的布局,我知道所有使用 CSS 的人都会告诉我这是邪恶的。多年来,我一直在研究 CSS,但从一开始我就无法让它按照我想要的方式控制我的布局。

简而言之,我想要的是拥有一个仅与其内容一样宽的

。我不想设置它的大小。我希望它的宽度与其动态创建的内容一样宽。

一张 table 完美地做到了这一点。使用

它似乎总是在做一些我不想做的事情。没有“溢出”选项可以满足我的要求。

典型的例子是当我想创建一个整页的分栏布局时,左栏包含导航链接,右栏包含内容。我希望左栏与导航链接一样宽。不多也不少。 (导航链接不是静态的;它们是动态创建的,并且可以随时更改大小/长度)。右边的(“内容”)列应该是剩下的。最重要的是,当我使浏览器屏幕变宽或变窄时,我希望左栏仍然与导航链接一样宽:不多也不少。如果浏览器的宽度太窄,我希望内容根据需要自动换行。在任何情况下,我都不希望文本被遮挡或超出定义的列。

简而言之,我想要一个可以像表格一样工作的

而不必使用表格。当然,CSS 专家。这可以做到……对吧?我在其他论坛上问过这个问题,但从未收到可接受的答案。

或者举一个有点相关的简单例子(也许这个很简单):

<ul style="background: orange;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

整个东西和浏览器屏幕一样宽。但我希望它只和最长的元素一样宽。我如何使用 CSS 做到这一点?我可以像这样把整个东西放在一张 table 里

<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),它会被换行。
  • 主要内容占据剩余宽度。

Example A


调整 #main div 的大小(通过调整浏览器窗口的大小)通过 overflow:hidden 起作用.

Example B


<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 属性。

关于html - CSS div 与其内容一样宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7015099/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com