浮動左無瀏覽器的大小

我做了一個形象的拇指這樣的效率，浮動左無瀏覽器的大小

<div id="image_thumb"> 
    <img src="img1.jpg" /> 
    <img src="img2.jpg" /> 
    <img src="img3.jpg" /> 
    <img src="img4.jpg" /> 
    <img src="img5.jpg" /> 
</div>

風格

#image_thumb { width:100%; max-height:650px; overflow-x:scroll } 
img { float:left; max-height:650px; }

我要讓圖像浮球不斷離開，並顯示在#image_thumb底部滾動。但是，圖像浮動在瀏覽器大小。 :(

我該怎麼辦

來源

2013-07-06 wcodavid

嘗試

img { float:left; max-height:650px; display:inline-block;}

來源

2013-07-06 07:54:57 Sid

給<div id="image_thumb">，而不是100%固定寬度例如：？

#image_thumb { width:1000px; max-height:650px; overflow-x:scroll }

來源

2013-07-06 07:54:59 Nadh

謝謝您的解決方案，但我想獲得股利靈活的寬度！ – wcodavid

試試這個，它應該工作：

<div id="image_thumb"> 
    <img src="img1.jpg" /> 
    <img src="img2.jpg" /> 
    <img src="img3.jpg" /> 
    <img src="img4.jpg" /> 
    <img src="img5.jpg" /> 
</div> 

#image_thumb { 
width:80%; 
max-height:650px; 
margin-left:10%; 
margin-right:10%; 
overflow-x:scroll 
display:inline-block; 
} 
img { 
float:left; 
max-height:650px; 
}

來源

2013-07-06 07:56:27 user2067005

謝謝，但圖像仍然下降。 – wcodavid

當您使用float，該元素將不會溢出其容器。

嘗試：

img { display:inline-block; max-height:650px; }

或者只是：

img { max-height:650px; }

來源

2013-07-06 08:04:23

所有你需要你做的是停止浮動圖像，添加white-space:nowrap;拇指，使圖像的行不能打破空間，word-spacing:-0.25em;隱藏圖像之間的空間。離開CSS爲：

#image_thumb { 
    width:100%; 
    max-height:650px; 
    overflow-x:scroll; 

    white-space:nowrap; 
    word-spacing:-0.25em; 
}

見http://jsfiddle.net/wB7q4/

來源

2013-07-06 10:04:10 Alohci

浮動左無瀏覽器的大小

回答

相關問題