設置元素負面「左」的位置正是它使用CSS3

我躲在一個inline-block的元素的父div內與overflow:hidden的寬度。然後我使用left屬性（負數）來抵消原始子元素，因此它被隱藏。我可以使用CSS3轉換將其展示回父級，但是我必須給這個負數偏移量一個相當大的數字（父div的寬度），使得時間取決於有多少文本。我需要它是完美的（因爲這裏沒有解釋的原因）。如果left值始終與inline-block元素的寬度值匹配，那將是完美的。設置元素負面「左」的位置正是它使用CSS3

有沒有辦法找到一個inline-block的元素的寬度並應用價值，它的左邊偏移CSS3？

我有一種感覺，我將不得不使用jQuery，我只是希望有人在這裏可能有一個美好的解決方案。 :)

這裏舉例： http://jsfiddle.net/RD7Yv/1/

來源

2012-03-09 AlexKempton

這是你想要做什麼？ http://jsfiddle.net/thirtydot/RD7Yv/4/ – thirtydot 2012-03-09 12:55:54

是的！不知何故，我認爲100％是父元素的寬度。我不知道我是怎麼錯過這個的。謝謝！ – AlexKempton 2012-03-09 13:12:15

@ thirtydot，AlexKempton實際上，它是！這就是爲什麼三十歲包裹着元素。非常好的小提琴順便說一句！ – Christoph 2012-03-09 13:19:08

嘗試left:-100%，這應該工作。

編輯： fiddle

來源

2012-03-09 12:41:56 Christoph

你的小提琴並沒有真正的幫助，但答案是我需要的，歡呼聲。在評論中還要讚揚他的完美例子thirtydot！ – AlexKempton 2012-03-09 13:15:20

Sry基因，如果我沒有在工作中，我會完善它;） – Christoph 2012-03-09 13:21:38

如果你只是想「揭示出來回用CSS3過渡父」，現在看來似乎會更容易在所有不動的元素，只是動畫它在地方的知名度。例如，這裏的動畫是不透明度：

http://jsfiddle.net/jfriend00/BqmQK/

所有，我們使用JS的是添加/從元素刪除類和CSS3做的不透明度動畫我們。通過這種方式，元素可以保留原始位置，我們不必做任何大小或位置計算。

此相同的動畫甚至可以不需要JavaScript做，如果它是由懸停觸發。

如果你想看到的圖像上滑動到位，那麼你可以設置它的初始位置：

left: -100%;

，並以動畫來：

left: 0;

你可以看到，在這裏工作： http://jsfiddle.net/jfriend00/P2H4Z/

來源

2012-03-09 13:08:21 jfriend00

感謝輸入，但它的滑動效果我真的很後。 :) – AlexKempton 2012-03-09 13:09:42

@AlexKempton - 有什麼副作用？ – jfriend00 2012-03-09 13:14:13

「幻燈片」效果。 – AlexKempton 2012-03-09 13:17:45

設置元素負面「左」的位置正是它使用CSS3

回答

相關問題