來自非父元素的CSS位置

我有一個編碼限制，我無法更改，並試圖找到一種方法來定位基於非父級的div。來自非父元素的CSS位置

我有下面的代碼結構，不能改變：

<div class="row"> 
    <div class="sub-row01"></div> 
    <div class="sub-row02"></div> 
</div> 
<div class="row"> 
    <div id="sub-row03"></div> 
</div>

我所試圖做的是位置＃子row03有關.SUB-row02。任何我已經嘗試過的，只會讓我把＃row03與第一個.row相關聯

是我想要達到的甚至可能嗎？如果是這樣，那麼設計它的正確方法是什麼？

來源

2013-07-27 ogmios

什麼HTML是在divs？該html看起來格式不正確。 – ProfileTwist

這是一個Wordpress主題通過簡碼生成代碼的方式。上述代碼的哪部分您認爲格式不正確？ – ogmios

*語義上該代碼格式不正確。但我想如果你不能改變html格式並不重要......無論哪種方式，CSS都不允許你向上移動文檔樹。所以你不能。 – ProfileTwist

要回答你的問題，這是不可能的純CSS，因爲它只允許使用父母或先前的孩子造型。

例如

a + b { } will style b 
a ~ b { } will style b 
a > be {} will style b

，但也沒有辦法在這些情況下的風格。

然而，你可以通過javascript來做到這一點。如果你想要走這條路線，你可以這樣做：

document.getElementById("sub-row03").style.left = document.getElementById("sub-row02").offset().left;

我可以寫一些更具體的，如果必要的有點，因爲我還沒有測試它，但它應該與基本概念幫助。

來源

2013-07-27 21:44:38 dmcqu314

看到這個問題是否可以在純CSS中解決將會感到驚訝。但我同意這個答案。用戶JavaScript或jQuery來定位選擇器，然後更新CSS。此前的答案可能有所幫助。 http://stackoverflow.com/questions/13762616/position-div-relative-to-non-parent-div-is-this-possible – web2kx

來自非父元素的CSS位置

回答

相關問題