0

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

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

这是用例：黑色的周围 div 是页面预览。黑色 div 内的蓝色 div 是此页面的部分。外面的蓝色 div 是“编辑”按钮。他们应该与他们的通讯员有相同的垂直位置。

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

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

4

3 回答 3

0

如果您无法触摸周围 div 中的任何内容，我不知道只有 CSS 方法可以实现您想要的。这是一个jQuery解决方案：

http://jsfiddle.net/BuS2p/

<!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>
于 2012-06-04T08:25:31.260 回答
0

纯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>
于 2012-06-04T08:34:43.460 回答
0

使用这个简单的 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;  
}
于 2012-06-04T08:40:36.303 回答