将子级设置为内容宽度，忽略父级宽度，并使父级滚动 [英] Set child to content width, ignore parent width, and make parent scroll

问题描述

仅使用CSS，就有可能获得以下示例，

我认为这是可能的.我只是找不到解决方法.

解决方案

您的 inline-block 解决方案是正确的-如果将较长的单词或图像放入图像中，则会出现滚动条.默认情况下，文本在空白处是断行的.

如果您不希望在空白处打断文本，则可以将 white-space:nowrap; 添加到子div，如下所示:http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?

The final result desired:

• parent element scrollable to child element
• child element's width set to 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>​

It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/

I think this is possible. I just can't find a solution.

解决方案

Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.

If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/

这篇关于将子级设置为内容宽度，忽略父级宽度，并使父级滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！