Question

由于图片说超过1000个单词，这是我的问题（注意：我无法发布图片，因为我没有足够的SO声誉，所以我会发布一个链接）：

http://s7.directupload.net/images/120604/skhgwuqb.png

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

因为黑色div及其内容是页面预览，我无法移动div内的编辑按钮（不改变页面模板以使用“编辑”按钮，这当然在设计上是不好的。）

如何对齐它们？如果Javascript是实现这一目标所必需的，那就没关系，尽管我非常支持CSS解决方案。

Answer 1

如果您无法触及周围div中的任何内容，我不知道只有CSS才能达到您想要的效果。这是一个jQuery解决方案：

<!doctype html><html><head>
<script src="/path/to/jquery.js"></script>
<style>
#surrounding_div {
 width: 400px;
 height: 400px;
 position: relative;
 background: blue;
}

#elm1 {
 width: 150px;
 height: 150px;
 background: red;
 position: absolute;
 left: 20px; top: 20px;
}

#elm2 {
 float: left;
 width: 350px;
 height: 100px;
 background: green;
 float: left;
 margin-top: 150px;    
}
</style>
</head><body>
<div id="surrounding_div">
  <div id="elm1">Testing</div>
  <div id="elm2">Testing</div>
</div>
<script>
jQuery(function() {
    $('#surrounding_div div').each(function() {
        theDiv = $(this);
        divOffset = theDiv.offset();
        $('<button>Edit</button>').appendTo('body').css({
          'left' : $('#surrounding_div').width() + 20,
          'top' : divOffset.top,
          'position' : 'absolute',
          'z-index' : 9000
        });
    });
});
</script></body></html>

Answer 2

纯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>

Answer 3

使用这个简单的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;  
}

当一个div嵌套在标签中而另一个div位于这些标签之外时，将两个div对齐

3 个答案: