如何使用.css將這4幅圖像在水平方向上進行等距離劃分？

相當新的每個圖像是一個按鈕，我希望他們能全部裝入容器等距

<div class="buttonImgContainer" > 
     <span><img class="buttonImg servicesImg" src="Images/services.jpg" alt="" /></span> 
     <span><img class="buttonImg galleryImg" src="Images/ProjectGallery.jpg" alt="" /></span> 
     <span><img class="buttonImg estimateImg" src="Images/Estimate.jpg" alt=""/></span> 
     <span><img class="buttonImg contactImg" src="Images/ContactUsSquare.png" alt=""/></span> 
</div>

來源

2012-04-01 KevinDeus

是相同的寬度和高度的圖像？ – 2012-04-01 22:05:28

如在：|中我我|我|我或|我我我| ？ – 2012-04-01 22:05:35

@Andres，這有什麼關係嗎？ – KevinDeus 2012-04-01 22:24:04

事實證明我與我之前的回答非常接近。這明確地做它：

.buttonImgContainer span { 
    width: 25%; 
    float: left; 
} 

span{ 
    text-align: center; 
}

這裏是爲解決.jsFiddle。我使用<span> s，它們是內聯的。 text-align: center;命名不正確，因爲它也會對齊圖像。這是拼圖的缺失部分..這個名字把我扔了。

將每個跨度設置爲其父項的012％<div>，這反過來使得該頁面比頁面更小，從而顯示跨度對於該元素是關鍵的。

在我的小提琴中，如果您調整列的大小，您將看到按鈕移動到與包含div相關的適當位置，即.buttonImgContainer。

來源

2012-04-15 05:48:41 KevinDeus

寫作

.buttonImgContainer img { 
width: 40px; /* Can be anything - also percentages. */ 
}

應該工作。 .buttonImgContainer匹配外部div的類和img確保這隻適用於.buttonImgContainer內的圖像。

編輯：或等待..等距離你的意思是等距離分開？在這種情況下，代碼會是這樣的：

.buttonImgContainer { 
margin: 0; 
padding: 0; 
} 

.buttonImgContainer img { 
margin-right: 40px; /* Can be anything - also percentages. */ 
}

很抱歉，如果我誤解了:-)

來源

2012-04-01 22:08:44

我已經編輯在這裏測試過它：Link

你可能想保持無線電，但我不確定你想要什麼尺寸，所以我讓你選擇。這是我改變了代碼：

<div> 
<span><img style="width:21%; left: 2%; top: 200px; position: absolute;" class="buttonImg servicesButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/services.jpg" alt="" /></span> 
<span><img style="width:21%; left: 27%; top: 200px; position: absolute;" class="buttonImg projectGalleryButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/ProjectGallery.jpg" alt="" /></span> 
<span><img style="width:21%; left: 52%; top: 200px; position: absolute;" class="buttonImg estimateButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/Estimate.jpg" alt=""/></span> 
<span><img style="width:21%; left: 77%; top: 200px; position: absolute;" class="buttonImg contactUsButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/ContactUsSquare.png" alt=""/></span> 
</div>

爲

.buttonImgContainer img 
{ 
width:21%; 
left: 2%; 
top: 200px; 
position: absolute; 
}

這工作得很好這可能是恢復。注意：如果你內嵌css，你必須刪除標籤class =「buttonImgContainer」，否則Internet Explorer（不知道爲什麼）根本不起作用。它沒有像預期的那樣100％地工作，但它確實體面。

來源

2012-04-01 22:09:40

改變，看看它是否現在你想要的。 Ofc，根據需要調整圖標的大小，唯一的問題是寬度必須以％爲單位。 – 2012-04-02 01:09:49

有沒有辦法做到這一點沒有絕對值？ – KevinDeus 2012-04-02 02:25:08

你的方法似乎沒有調整它們的封閉div的圖像大小（使你的封閉div減小50％沒有效果）。看起來圖像被硬編碼爲頁面大小 – KevinDeus 2012-04-02 02:27:29

這似乎爲我工作：

.buttonImgContainer span { 
    width: 25%; 
    float: left; 
} 


#buttonImgContainer img { 
    float: right; 
}

來源

2012-04-01 22:25:26 KevinDeus

這個右邊的按鈕是不是太多了？此外，它應該是.buttonImgContainer img而不是#buttonImgContainer img，因爲它實際上是[class]（http://www.w3schools.com/css/css_id_class.asp） – 2012-04-01 22:31:36

，它可以在Chrome和FF中使用，但不能在IE瀏覽器。我的答案似乎並不好。 – KevinDeus 2012-04-01 23:01:15

IE發生了什麼？你能提供一個鏈接，我們可以看到嗎？您正在將兩個語句定義爲類和id，因此足夠奇怪的IE可以做到恰到好處，Chrome和FF更加靈活並且可以接受它。或者，也許他們工作，因爲他們不接受第二個陳述或...有很多選擇。你有沒有嘗試我的建議？ – 2012-04-01 23:16:34

我寫這個例子，你可以檢查一下。

第一你可以在CSS顯示限定範圍標記屬性：表小區

作爲這樣

CSS

span{ 
    display:table-cell; 
    padding-left:10px; 
}

HTML

<div class="buttonImgContainer" > 
     <span><img class="buttonImg servicesImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt="" /></span> 
     <span><img class="buttonImg galleryImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt="" /></span> 
     <span><img class="buttonImg estimateImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt=""/></span> 
     <span><img class="buttonImg contactImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt=""/></span> 
</div>

現場演示http://jsfiddle.net/rohitazad/LeY6t/2/

來源

2012-04-02 05:03:04

如何使用.css將這4幅圖像在水平方向上進行等距離劃分？

回答

相關問題