CSS:有没有办法让溢出强制框增长?

CSS:有没有办法让溢出强制框增长?,css,Css,我在一个较大的页面中有一个侧边栏。所以我创建了一个div,float:right,width:30%。在分区内是一个预科。根据浏览器窗口的大小,pre的宽度可能大于30%。因此,文本从侧边栏的右边缘流出 溢出让我说放在滚动条上。但我真正想做的是让div增长到适合pre的宽度。但是我不能仅仅将宽度设置为自动,因为div中还有其他文本,如果我将宽度设置为自动,它将填充屏幕的宽度,而不是作为边栏 CSS中是否有任何方法可以设置最小宽度,但让长方体增长以容纳pre、一个长而不可断的字符串等 更新 好的,

我在一个较大的页面中有一个侧边栏。所以我创建了一个div,float:right,width:30%。在分区内是一个预科。根据浏览器窗口的大小,pre的宽度可能大于30%。因此,文本从侧边栏的右边缘流出

溢出让我说放在滚动条上。但我真正想做的是让div增长到适合pre的宽度。但是我不能仅仅将宽度设置为自动,因为div中还有其他文本,如果我将宽度设置为自动,它将填充屏幕的宽度,而不是作为边栏

CSS中是否有任何方法可以设置最小宽度,但让长方体增长以容纳pre、一个长而不可断的字符串等

更新

好的,有人要密码。下面是一个精简的示例,演示了这个问题

<html><title>Sidebar Test</title>
<div style="width:50%;float:right;border:1px solid black;">
<p>Here is some text for the sidebar. La di da di da. Here's more text.</p>
<pre>
This is a pre with a fairly long line.
</pre>
</div>
<p>Here's the non-sidebar text. Write a few lines worht of text here. Here we go.
Lorem ipsum whatever.
</p>
</html>    
侧边栏测试
下面是侧边栏的一些文本。拉迪达。这里有更多的文字

#preonboard, #preonboard pre {
  border:dotted;
  display:table;
}
这是一个有相当长的线的前置机。 这是非侧边栏文本。在这里写几行文字。我们开始吧。 不管是什么。


将其粘贴到一个文件中,然后缩小窗口,您将看到“这是一个带有很长一行的pre”将扩展到边栏之外。

如果您将包含div的显示设置为
显示:inline块
然后它会根据其子对象的宽度增长/收缩。

您有
显示:表格
/
内联表格
,这将有助于缩小/缩小该框并使其符合其内容

您还可以设置一个
minwidth
来代替允许浮动框展开的宽度

添加到代码段的
display:table
示例

演示


pre
周围的内容也将使这个浮动框增长。您可以为这些其他内容设置最大宽度。

为什么不先共享代码。您是否想过只执行overflow-x:auto;关于pre本身?这样,只有代码片段才可以滚动。@Natewley:好的,有可能。不是我想要的样子,但总比从盒子里跑出来好。嗯,我试过这个,然后。。。它不起作用。也许它需要其他的标签才能起作用。现在它真的起作用了!我以前从未使用过display:table,我不知道它的具体工作规则是什么,但它似乎可以解决我一直在努力解决的许多布局问题,我知道我可以用表按我想要的方式进行布局,但我试图遵循“不要将表用于布局”的教条。