Css 当一个div嵌套在标记中，而另一个位于这些标记之外时，对齐相邻的两个div

正如图片所说的1000多个单词，这是我的问题（注意：我不能发布图片，因为我没有足够的声誉，所以我会发布一个链接）：

以下是用例： 周围的黑色div是一个页面预览。黑色分区中的蓝色分区是本页的各个部分。外面的蓝色div是“编辑”按钮。它们应该与对应对象具有相同的垂直位置

因为黑色div及其内容是一个页面预览，所以我无法在div内移动编辑按钮（如果不改变页面模板使其具有“编辑”按钮，这当然是设计上的错误）

---

如何对齐它们？如果需要Javascript来实现这一点，那也没关系，尽管我强烈支持CSS解决方案。

如果您无法触及周围div中的任何内容，我不知道实现所需内容的唯一CSS方法。以下是jQuery解决方案：

#周围分区{
宽度：400px；
高度：400px；
位置：相对位置；
背景：蓝色；
}
#elm1{
宽度：150px；
高度：150像素；
背景：红色；
位置：绝对位置；
左：20px；上：20px；
}
#elm2{
浮动：左；
宽度：350px；
高度：100px；
背景：绿色；
浮动：左；
边缘顶部：150px；
}
测试
测试
jQuery（函数（）{
$（'#环绕_div'）。每个（函数（）{
theDiv=$（本）；
divOffset=theDiv.offset（）；
$（'Edit'）.appendTo（'body'）.css({
'左'：$（'#环绕_div'）。宽度（）+20，
“top”：divOffset.top，
'位置'：'绝对'，
“z指数”：9000
});
});
});

纯css解决方案

<div style="border:solid;width:200px;height:400px;">
<div style="position:relative;width:500px;height:100px;"><div style="position:absolute;"><div style="width:190px;float:left;border:solid #3300FF;height:100px;"></div><div style="margin-left:10px;border:solid #3300FF;height:10px;width:100px;float:left;"></div></div>
</div>
<div style="position:relative;width:500px; height:100px;"><div style="position:absolute;"><div style="width:190px;float:left;border:solid #3300FF;height:100px;"></div><div style="margin-left:10px;border:solid #3300FF;height:10px;width:100px;float:left;"></div></div>
</div></div>

---

只需使用HTML和css即可

<div id="surrounding_div">
    <div id="elm1">Testing <button>Edit</button></div>
    <div id="elm2">Testing
        <button>Edit</button>
    </div></div>

#surrounding_div {
 width: 400px;
 height: 400px;
 background: blue;
}

#elm1 ,#elm2{position:relative;}

#elm1 button ,#elm2 button{position:absolute; top:-4px; right:-250px}
#elm2 button{right:-50px}


#elm1 {
 width: 150px;
 height: 150px;
 background: red;
}

#elm2 {
float: left;
width: 350px;
height: 100px;
background: green;  
}

测试编辑
测试
编辑
#周围分区{
宽度：400px；
高度：400px；
背景：蓝色；
}
#elm1，#elm2{位置：相对；}
#elm1按钮，#elm2按钮{位置：绝对；顶部：-4px；右侧：-250px}
#elm2按钮{右：-50px}
#elm1{
宽度：150px；
高度：150像素；
背景：红色；
}
#elm2{
浮动：左；
宽度：350px；
高度：100px；
背景：绿色；
}

你不能发布一张所需结果的图片吗非常感谢，这很好地完成了这项工作。因此，你在“尽管我非常喜欢CSS解决方案”一行中撒了谎。@Somebodyisintrouble:如果我的英语解析器工作正常，我想OP不希望编辑按钮被放置在周围的

元素中。我不知道有哪种CSS唯一的方式可以让周围

之外的元素与所述

内部的元素具有完全相同的垂直位置。

<div id="surrounding_div">
    <div id="elm1">Testing <button>Edit</button></div>
    <div id="elm2">Testing
        <button>Edit</button>
    </div></div>

#surrounding_div {
 width: 400px;
 height: 400px;
 background: blue;
}

#elm1 ,#elm2{position:relative;}

#elm1 button ,#elm2 button{position:absolute; top:-4px; right:-250px}
#elm2 button{right:-50px}


#elm1 {
 width: 150px;
 height: 150px;
 background: red;
}

#elm2 {
float: left;
width: 350px;
height: 100px;
background: green;  
}