0

我正在尝试向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拉伸以适应。我希望外部 div 不调整大小（而是保持内部div不存在时的大小），而是让内部div显示水平滚动条。

div如果可以知道外部应该有多大，并且将内部 div 限制在此范围内，这很容易做到width，但在这里我想将外部div的尺寸标准设为“使用适合所有内部的任何宽度元素，除了那个宽内div“。

为了做到这一点，我的猜测是内部div需要从外部的尺寸计算中仅忽略宽度，而不是高度，这就是我不知道该怎么做。我尝试了几件事：

  • 将外部div的设置position为relative，然后将内部的设置为absolute。这适用于外部div不再被内部拉伸，但水平滚动条没有出现，它的位置在距离外部 div 的左上角 0,0 的范围内，并且它与一些重叠外部div的内容
  • 制作内部div浮动，并将其包裹在两个clear: both元素之间，如下所示，这仍然会导致外部元素拉伸：

.

<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( min-content, fit-content, )的一些 Mozilla 供应商前缀available，但它们似乎都没有我想要的效果

简而言之，我想要一个很像上面这个页面上的 HTML 代码列表的效果，但是这个页面通过在问题容器上设置一个固定的宽度来实现它。这样的事情可能吗？

4

2 回答 2

1

在不设置固定宽度的情况下，我能想到的唯一方法是这样做：

http://jsfiddle.net/pgRd5/

将内部 div 宽度设置为 0，并强制溢出可见。然后在外层div上设置overflow为auto，滚动条就会出现在外层div上。如果你想要内部 div 上的滚动条，那么你就不走运了。

这不是世界上最好的解决方案，因此我建议您将侧边栏设置为具有 max-width 属性，例如在本示例中。

于 2012-05-14T02:18:07.363 回答
1

正如我在评论中所说，如果不实际指定该限制，就不可能限制宽度。您是否有任何关于页面上列大小的指南，例如百分比或设置主列宽？否则页面不知道为每列分配多少空间，并且页面的外观将无法预测。

我收集您不想设置宽度的原因是您可以使用屏幕的全部可用宽度。因此，我建议您使用百分比，例如右侧边栏的 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>

您将需要测试该跨浏览器，但它应该可以在大多数浏览器中使用）

于 2012-05-14T02:57:30.010 回答