javascript - 具有动态宽度和水平滚动条的 Div

标签 javascript html css

我有这个代码:

<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/

相关文章:

javascript - jQuery Else/If 阻止继承样式

javascript - 显示或隐藏子 div

javascript - 为什么文字会压低图片?

html - 当具有两个嵌套类时应用 SASS (.scss) 规则

html - CSS3 : how to put something at the top of second column?

css - 防止 flexbox 收缩

html - 如何将样式应用于所有文本输入且不具有 "size"属性?

javascript - 如果 div 为空,Eslint airbnb 会强制执行自关闭 div 标签。如何禁用此规则?

javascript - Chrome 扩展程序 - 未设置基本 href。请为 APP_BASE_HREF 提供一个值

javascript - Bootstrap 下拉选择使屏幕跳转