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 に答える