gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 08:46:15 26 4
gpt4 key购买 nike

我有这个代码:

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com