我怎樣才能讓這些鏈接和圖像以內嵌方式出現

這看起來很簡單，但我似乎因爲某些原因而失敗。所以我有3張圖片，每張圖片上方都有鏈接。我希望它們以內聯方式出現，並且我不能使用表格，所以我嘗試使用div，但它們一個接一個出現，而不是內聯。注意：我的網頁寬度爲1000像素我怎樣才能讓這些鏈接和圖像以內嵌方式出現

<!-- First Div with link and image--> 
    <div style="float:left;width:33%"> 
     <a href="/bartop">BarTop Epoxy</a> 
     <img style="margin: 15px;"src="image1" width="300" height="315"> 
    </div> 
    <!-- Second Div with link and image--> 
    <div style="float:left;width:33%"> 
     <a href="/counter top"> Countertop</a> 
     <img style="margin: 15px;" src="image2" width="300" height="315"> 
    </div> 
    <!--third Div with link and image--> 
    <div style="float:left;width:33%"> 
     <a href="/flooring">Flooring</a> 
     <img style="margin: 15px;" src="image3" width="300" height="315"> 
    </div>

來源

2014-01-16 user3204342

請指定您正在使用哪個瀏覽器，上面的代碼應該工作。或者添加容器div和相關的css – Huangism

@Plume最後一項不需要它 – Huangism

我使用的是鉻，但清除沒有作品，或者我沒有考慮圖像兩側的15px – user3204342

有你需要檢查兩件事情：

那的DIV不清除 - 他們應該有clear:none聲明或繼承。
您的容器中有足夠的空間用於所有這些項目。您的浮動元素包含300個像素寬的元素以及額外的30個像素邊距。你的容器寬990像素嗎？甚至660px寬？如果沒有足夠的空間供他們使用，浮游物會撞到之前的浮游物下方。

來源

2014-01-16 21:42:33

這不是問題，但是我需要考慮額外的30px – user3204342

這是一個很好的觀點。實際上，聲明的百分比在大多數瀏覽器中都不會發生。我會檢查繼承（確保沒有另外的規則覆蓋'float'或清除它）。「 –

默認divs有一個display: block;屬性，這意味着它們不會出現在同一行上。

您可以通過像顯示float一樣修復此問題，但您應該添加樣式clear: none;以確保允許浮動元素並排排列。

或者，您可以使用display: inline-block;，這對您正在嘗試執行的操作可能會更好，而here's a jsfiddle可以使用此選項。

來源

2014-01-16 21:45:40 Christina

」默認情況下，div有一個display：block;屬性，這意味着它們將並排顯示。「你不是一個接一個的嗎？ – Huangism

是的，我錯過了。編輯。 – Christina

也據我所知，只要它們的總寬度不超過容器寬度，你不需要清除任何一個並排地獲得2個浮動元素（http://jsfiddle.net/WGyzw/） – Huangism

我怎樣才能讓這些鏈接和圖像以內嵌方式出現

回答

相關問題