液體圖像在一行

我已經偶然發現了一個小問題，出於某種原因，我不知道如何解決。這可能是其中一種看起來很簡單但不可能實施的情況之一。這裏的問題：液體圖像在一行

我想在一個div中添加幾個圖像彼此相鄰。他們需要沒有間距
該div有一個百分比寬度設置，以便它達到某一點我希望這些圖像開始變小。現在發生的情況是，當div不能再包含圖像時，圖像會垂直垂直下落。

讓圖像縮小的技巧是通過添加img {max-width：100％; }在css文件中，但在這種情況下不起作用。我想問問，如果有人知道這個問題的簡單解決方案？我可以嘗試根據寬度將每張圖片的最大寬度設置爲不同的數字，但我擔心計算會在某些瀏覽器中關閉（我們都知道一些瀏覽器如何處理帶有小數位的百分比）。

在此先感謝

非工作示例：

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div> 
CSS: img { max-width: 100%; }

點評：這是完美的單一的形象，所以我正在尋找的多張圖片一樣簡單。

工作例如：

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

評論：計算百分比寬度是一種痛苦，我不知道，如果它甚至會在所有情況下工作。

來源

2012-02-18 Marius

我已經說過了。以百分比形式將每個圖像設置爲特定的寬度。我也嘗試過在特定寬度的浮動div中圍繞它們。這兩種方法都有效，但正如我所提到的，我擔心一些瀏覽器會錯誤地進行計算。更不用說這樣做是一件痛苦的事情。我只是想找到一個更簡單的方法。 – Marius 2012-02-18 10:00:24

顯示你的代碼plz。 – 2012-02-18 10:04:04

在原問題中發佈一些示例 – Marius 2012-02-18 10:09:59

我認爲如果你嘗試在一個單獨的div內完成所有的工作，你將會面臨一場艱苦的戰鬥。一個簡單可靠的解決方案是使用一張桌子。你也可以用一堆近似表格的div來做到這一點。

http://jsfiddle.net/chad/uSrYx/ - 表

http://jsfiddle.net/chad/uSrYx/1/ - div的僞裝成表

http://jsfiddle.net/chad/uSrYx/2/ - 與內聯塊的div白色空間的內側的略微不同的影響：NOWRAP容器。只有在您知道每行有多少圖像之前，纔可以使用

這一切都取決於您希望在較舊的瀏覽器中如何降級。使用表格會將所有內容保留在同一行上，但該行的寬度不會縮小。使用div將垂直堆疊圖像。

來源

2012-02-18 10:41:49

謝謝你的時間。我想我最喜歡第三種解決方案。但是研究這些例子的一個問題仍然存在 - 如果我的圖像需要彼此「卡住」而沒有任何間隔，那該怎麼辦？這意味着它們的容器永遠不會比圖像更寬。這意味着......浮點百分比寬度（假設圖像寬度不相等），不是嗎？和百分比作爲浮動...我想，但我不知道，一些瀏覽器將無法正確渲染。 – Marius 2012-02-18 11:36:53

http：// jsfiddle。net/chad/uSrYx/4 /我改變了內容框的寬度：33％到最大寬度：33％。現在圖像拼接在一起，但圖像行不一定佔用容器的整個寬度。我設計的圖像加劇了這一點。如果圖像的總寬度大於容器的寬度，則不應該成爲問題。如果你使用這種技術，只要確保你所有的div都相互對立，如下所示：

。否則，你會得到他們之間的空間，這會弄亂它。 – 2012-02-18 12:04:19

聰明...謝謝！ – Marius 2012-02-18 12:15:59

液體圖像在一行

回答

相關問題