我有这个代码:
<div style="height:190px;width:1000px;white-space:nowrap;overflow:auto;table-layout:fixed">
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album1.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 1 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album2.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 2 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album3.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 3 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album1.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 1 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album2.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 2 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album3.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 3 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album1.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 1 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album2.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 2 (2,99€)</a>
<a style="width:150px;display:inline-block;margin-right:10px;font-weight:bold" href="#"><img src="album3.jpg" style="width:150px;height:150px;margin-bottom:2px"><br>Album 3 (2,99€)</a>
</div>
这基本上是一个带有水平滚动条的固定宽度 DIV,我需要做的是使其宽度适应父元素(表格单元格)。设置width:100%溢出父容器,滚动条消失,怎么办?
谢谢
最佳答案
只需使用 width: auto
。
fiddle :http://jsfiddle.net/9FSBP/ (注意 div 适合 fiddle 的父 div 宽度)
我还建议使用 css 类而不是重复内联 CSS。
这是一个更新的 fiddle ,在 td 中演示它(注意 max-width 在 td 上设置):http://jsfiddle.net/9FSBP/1/
关于javascript - 具有动态宽度和水平滚动条的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21783361/