个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试向现有的非固定大小 div 添加一个非常宽的 div。这是一个最小的示例 ( jsfiddle ):
<html>
<head/>
<body>
<div style="float: right; border: 1px solid green;">
Some content
<div id="problematic-div" style="border: 1px solid red; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
Main content goes here
</body>
</html>
发生的事情是，较大的内部 div 使外部 div 拉伸(stretch)以适合。我希望外部 div 不调整大小(相反，保持内部 div 不存在时的大小)，而是让内部 div 显示水平滚动条。
如果可以知道外部 div 应该有多大，并将内部 div 的 width 限制为该大小，那么这很容易做到，但在这里我会喜欢将外部 div 的大小标准设置为“使用适合所有内部元素的任何宽度，除了较宽的内部 div”。
为了做到这一点，我的猜测是内部 div 需要从外部的尺寸计算中忽略仅宽度，而不是高度，这就是我不知道该怎么做。我已经尝试了一些事情:
div 的 position 设置为 relative，然后将内部的设置为 absolute。这在一定程度上起作用，即外部 div 不再被内部拉伸(stretch)，但是水平滚动条没有出现，它的位置是从外部的左上角开始的 0,0 div，它与外部div的一些内容重叠div float ，并将其包裹在两个 clear: both 元素之间，如下所示，这仍然会导致外部元素拉伸(stretch):.
<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too
width 的某些 Mozilla 供应商前缀(min-content、fit-content、available)，但是它们似乎都没有达到我想要的效果简而言之，我想要的效果很像上面在这个页面上列出的 HTML 代码，但是这个页面通过在问题容器上设置固定宽度来实现它。这样的事情可能吗？
最佳答案
正如我在评论中所说，如果不实际指定限制，就不可能限制宽度。您是否有关于页面上列大小的任何指南，例如百分比或设置主列宽度？否则页面不知道为每一列分配多少空间，页面的外观将无法预测。
我认为您不想设置宽度的原因是您可以使用屏幕的全部可用宽度。因此，我建议您使用百分比，例如右侧边栏的 30%。这提供了一个可预测的布局，并且还允许您在内部内容上实现所需的滚动条，因为您已经指定了外部 div 的限制。例如
<div style="float: right; width:50%">
Some content
<div id="problematic-div" style="overflow-x: scroll; width: 100%;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
您需要测试该跨浏览器，但它应该适用于大多数浏览器)
关于CSS:在不拉伸(stretch)的情况下将宽元素放入 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10576662/
25
4
0
函数参数中或显示尺寸时(高度，宽度)的顺序是否有约定？ 最佳答案 我不知道大量的语言，但我使用过的语言(宽度，高度)。它更适合沿着 (x, y) 坐标线。 关于language-agnostic -
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
有没有办法显示自定义宽度/高度的YouTube视频？ 最佳答案 在YouTube网站上的this link中: You can resize the player by editing the obj
如何从此表单获取数据(数据的长表示): import pandas as pd df = pd.DataFrame({ 'c0': ['A','A','B'], 'c1': ['b',
我在让宽度为 900px 的页面在宽度低于 900px 的分辨率下看起来不错时遇到了一些麻烦。这包括智能手机等移动设备。看起来我在页面上放大了，但无法滚动或缩小。我的页面包装器被定义为以屏幕为中心。这
我有一个包含一个表的 div，它有另一个带有动态变化文本的 div。div 有样式 overflow: hidden; white-space: nowrap; text-overflow: elli
我一直在愚弄下面的html代码。我已将 div id ="mainWide"设置为 2500 像素的宽度，这比我的屏幕还宽，我希望在主浏览器窗口中有一个水平滚动条，而不是在 div block 本身中
当我的屏幕浏览器窗口在 992px-1199px 之间时，我的文章元素比它们的父 div (.wrapper) 更宽。所以在这个屏幕宽度下，面板重叠并且看起来不对。 在所有其他屏幕宽度下，我的代码都准
我在对齐某些行时遇到了一些问题。我正在显示一个占据视口(viewport) 100% 高度的部分。因此，当您在屏幕上查看此部分时，您只会看到此部分。 在这个部分中，我有一个标题和副标题。标题应显示在节
为什么表单输入字段比其父 div 宽？宽度应用于文本 div，但不应用于其中包含表单字段的 div。为什么会这样？ See the livecode here. .parent { width:
我想让这个标题 100% 宽。我在 jsfiddle 上试过这个，但是左边和右边还有一些余量。 CSS: #header { background: url("../img/top-bg.png
我的页面宽度有问题。无论我尝试什么，它的左边或右边都有白边(默认情况下在右边，如果我使用 margin-right:0 则在左边)。如果我使用 margin:0 比它留在右边。尝试了我所知道的一切，但
我有一个带有背景图片的宽 div。 div 的宽度为 1100 像素，当浏览器窗口小于该宽度时，会出现滚动条。有什么办法可以避免滚动条吗？那不是任何黑客。现在我知道我可以把它放在 body image
我有一个您可以访问的应用程序 here .当您打开应用程序时，只需单击加号按钮，您就会看到一个带有搜索栏的模态窗口。 现在请执行这两个搜索: 搜索 1:AAA 搜索 2:AAE 您会看到，在 AAE
这个问题在这里已经有了答案: Does element width include padding? (5 个答案) 关闭 7 年前。 HTML CSS .wrap{widt
我正在尝试在工具栏中创建一个自定义显示，类似于 Xcode 工具栏中心的信息 Pane 。 我们如何创建一个宽度超过 32 点的 NSToolbarItem？ 框架始终将其限制为 32 点，即使最小和
我想将df1转换成df2 旧示例数据框 df1 df1 长)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/359
我正在使用 JavaScript 代码在 FireBase/FireStore 中上传图像。 核心功能已经可以运行，我可以上传，但我还需要在上传之前检查图像的大小。这就是我很乐意获得帮助的地方。 以下
如何在 Tkinter 中设置/更改 ttk.Separator 对象的长度/宽度？ ttk.Separator(self, orient='horizontal').grid(c
我有一个简单的问题。为什么 a 不会自动调整其内容的大小？像这样: Test 返回 width:100%，尽管我希望“Test”这个词简单地居中。有什么想法吗？ 最佳答案 您的问题与 HT
我是一名优秀的程序员,十分优秀！