单独使用CSS,是否可以获得以下示例http://jsfiddle.net/LdJ7t/,而无需明确知道子元素的宽度?
最终结果:
#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/
我认为这是可能的。我只是找不到解决方案。
答案 0 :(得分:5)
您的inline-block
解决方案是正确的 - 如果您将更长的文字放入图片或图片中,则会显示滚动条。默认情况下,文本在空白处被破坏。
如果您不想在空格上打破文字,可以像这里一样将white-space: nowrap;
添加到子div:http://jsfiddle.net/LdJ7t/2/