股利動態寬度和水平滾動條

我有這樣的代碼：股利動態寬度和水平滾動條

<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與水平滾動條，我需要做的就是其寬度適應父元素（一個表格單元格）。通過設置寬度：100％它溢出父容器和滾動條消失，我該怎麼辦？

謝謝

來源

2014-02-14 Xriuk

你真的應該考慮使用類。像這樣[DEMO]（http://jsfiddle.net/Ruddy/WHakm/） – Ruddy

可能是'position：relative;'爲你工作。 – Tariq

這是一個複製/粘貼嘗試我會稍後使用類......這不是我的問題反正 – Xriuk

只需使用width: auto。

小提琴：http://jsfiddle.net/9FSBP/（注意DIV適合小提琴的父DIV寬度）

我也建議使用CSS類，而不是重複內聯CSS。

這裏有一個更新的小提琴一個TD內證明它（注意最大寬度設置對TD）：http://jsfiddle.net/9FSBP/1/

來源

2014-02-14 15:40:20 mayabelle

保持溢出。它在TD裏面。是的，我打算使用這些只是複製/粘貼的嘗試。 – Xriuk

更新了小提琴，見上面 – mayabelle

+1工作正常，工作做得很好。 – Ruddy

股利動態寬度和水平滾動條

回答

相關問題