如何相对于css中的其他元素有选择地定位元素

Question

您好我想知道如何使用CSS专门针对其他元素对齐/定位html元素。这是一个小提琴http://bit.ly/1tbOHEY，我希望在其中显示侧边栏元素1与具有id="alignwithme1"的div对齐，侧边栏元素2与具有id="alignwithme2"的div对齐，导致类似下图的内容。

是否可以使用CSS对其他html元素进行选择性定位？解决方案将非常有用。提前谢谢了。 ：）

Answer 1

这就是事情。 CSS选择器无法向后遍历。因此，除非其中一个元素是另一个元素的子元素，否则两个单独元素的子元素无法单独使用css进行样式化。

如果你想要一个完整的CSS方法并且＃normal1的高度未知，这可能是你唯一的选择：

<强> HTML

<div id='header'>Header</div>
<div id="mainpost">
    <div id="alignwithme1">Align with Me 1
        <div id="se1">Sidebar element 1</div>
    </div>
    <div id="usual1"></div>
    <div id="alignwithme2">Align with Me 2
        <div id="se2">sidebar element 2</div>
    </div>
</div>

---

＆安培;的 CSS

#header{width:auto; height:25px; font-size:15px; text-align:center;background:black; color:white;}
#mainpost{width:50%; height:auto; background:yellow; color:black;padding:12px;float:left;}
#usual1{width:160px;height:145px;background:black;color:white;margin:10px;}
#alignwithme1{width:auto; height:50px;background:black;color:white;margin:10px;text-align:center;padding:4px;}
#alignwithme2{width:auto; height:50px;background:black;color:white;margin:10px;text-align:center;padding:4px;}
#sidebar{width:40%; height:auto;float:right;}
#se1{width:auto;height:35px;color:black;background:#44accf;padding:9px;text-align:center;margin:10px;}
#se2{width:auto;height:35px;color:black;background: #44accf;padding:9px;text-align:center;margin:10px;}

#alignwithme1,
#alignwithme2{
    position: relative;
}
#se1,
#se2{
    width: 80%;
    position: absolute;
    top: -10px;
    left: 110%;
}

这是用于在垂直菜单中定位子菜单的方法。

否则，您必须使用JS找出top-offset并使用它来定位元素。希望这会有所帮助。