将子项设置为内容宽度,忽略父级宽度,并进行父级滚动

时间:2012-12-21 23:50:53

标签: css

单独使用CSS,是否可以获得以下示例http://jsfiddle.net/LdJ7t/,而无需明确知道子元素的宽度?

最终结果:

  • 父元素可滚动到子元素
  • 子元素的宽度设置为内容

Parent element scrollable to child content

#Parent {
    width: 100px;
    height:200px;
    background: #ccc;
    overflow:auto;
    padding: .5em;
    margin: .5em;
}

#Child {
    width:300px;
    height:100px;
    background:yellow;
}​

<div id="Parent">
    <div id="Child">
        This is a test. This is a test.
    </div>
</div>​

看起来display:inline-block;几乎有效:http://jsfiddle.net/LdJ7t/1/

我认为这是可能的。我只是找不到解决方案。

1 个答案:

答案 0 :(得分:5)

您的inline-block解决方案是正确的 - 如果您将更长的文字放入图片或图片中,则会显示滚动条。默认情况下,文本在空白处被破坏。

如果您不想在空格上打破文字,可以像这里一样将white-space: nowrap;添加到子div:http://jsfiddle.net/LdJ7t/2/