个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我在较大的页面中有一个侧边栏。所以我用 float:right 和 width:30% 创建了一个 div。在 div 里面是一个 pre。根据浏览器窗口的大小，pre 可能会比 30% 宽。所以文本从侧边栏的右边缘流出。
overflow 让我说要放置滚动条。但我真正想做的是让 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>
将其粘贴到一个文件中，然后缩小窗口，您会看到“这是一个很长的行”将延伸到边栏之外。
最佳答案
您有 display:table/inline-table 这将有助于根据内容缩小/扩展框。
您也可以设置一个 min-width 而不是允许 float 框扩展的宽度。
将 display:table 添加到您的代码段的示例
#preonboard, #preonboard pre {
border:dotted;
display:table;
}
演示 http://codepen.io/anon/pen/aqrIj
pre 周围的内容，也会使这个 float 框变大。您可以为这些其他内容设置最大宽度。
关于CSS:有什么方法可以让 overflow force box 变大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21213150/
24
4
0
COW 不是奶牛，是 Copy-On-Write 的缩写，这是一种是复制但也不完全是复制的技术。 一般来说复制就是创建出完全相同的两份，两份是独立的： 但是，有的时候复制这件事没多大必要
我是一名优秀的程序员,十分优秀！