別のdivのdivを配置するにはどうすればよいですか？

Question

私はアイテムのリストを持っています（トピックと呼んでいます）。トピック上を移動するときにユーザーがそれを操作できるように（トピックカードと呼ぶ）divを表示します。私の現在のアイデアは、各トピックの横にdivを配置し、それに応じて配置することです。しかし、私はそうすることに問題があります。それはページ上のスペースを取ることができないので、私はposition：absoluteを使用することを想像します。ただし、常にトピックの右側に配置する必要があります。また、float：leftとposition：absoluteの組み合わせは、トピックカードが単にトピックと重なるように配置されることを意味します。

私はこれに関する提案を得ることができますか？私はまた、何らかのjqueryの提案にもオープンしています。本当に、私は、最も簡単で最も標準に準拠したものを選んでいます。

Answer 1

"display"プロパティを使用します。 「表示：インライン」してみ http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

一度にtopicdetailsの最大1つのセットを表示することができた場合は、= nonedisplayで0,0を配置する1つのdivセットを持っています。表示する必要があるときはいつでも、場所を適切に設定するか（表示されるイベントのトリガーに使用するものであれば、mousover/hover DOM要素から取得する）、コンテンツをロード/設定します。削除時には、表示をnoneに設定するだけです（コンテンツが次に表示される新しいコンテンツに置き換えられるため、コンテンツは無視されます）。

Answer 3

そこにjQueryのツールチッププラグインがたくさんあります。そのうちの1つを使用して、必要な方法で設定する必要があります。ここで

例としていくつかある：あなたはすべてが、あなたは絶対に側にそれをプッシュするために、負のrightであなたの「トピックカード」を配置することができますどのように大きな知っている場合 http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 4

。このCSSような何か：

#element { 
    margin-right: 100px; 
    position: relative; 
} 
#sidecar { 
    display: none; 
    width: 100px; 
    position: absolute; 
    right: -100px; 
    top: 0; 
} 

そして、このHTML構造：

<div id="element"> 
    <div id="sidecar"> 
    </div> 
</div> 

そして、それを有効にするには、この：

$('#element').hover(function() { 
    $('#sidecar').toggle(); 
}); 

デモ：http://jsfiddle.net/ambiguous/5a79g/

あなたがわからない場合どのくらい大きなものがあるかは、jQueryを使って位置と幅を計算することができますoffsetおよびwidthの方法。