显示具有相对位置的div在另一个div旁边

Question

我想在另一个div旁边显示一个文本框，但它显示在下面。 文本框的位置必须是绝对的。 该演示演示了该问题。 谢谢。

CSS

#show{
   border:1px solid gray;
   cursor:pointer;
   float:left; 
}

#textBox{
      display:none;
      position:absolute;
      border:1px solid gray;
      width:100px;
      height:100px;
      float:left;
      background-color:pink;
}

#hide{
     clear:left;
     cursor:pointer;
     text-align:center;
}

HTML

<div id = "show">click me to show test box</div>
<div id = "textBox">text</div>
<div id = "hide">hide text box</div>

JS

$('#show').click(function(){
  $('#textBox').show();
});

$('#hide').click(function(){
  $('#textBox').hide();
});

Answer 1

最简单的方法是将您的CSS替换为以下代码：

#show{
       border:1px solid gray;
       cursor:pointer;
       float:left; 
}
#textBox{
          display:none;
          position:absolute;
          border:1px solid gray;
          width:100px;
          height:100px;
          margin-left:165px;
          background-color:pink;
}
#hide{
         clear:left;
         cursor:pointer;
         text-align:center;
         margin-left:76px;
}

检查小提琴： http : //jsfiddle.net/6gk0hybj/4/

提到的另一种方法是可以在以下位置找到注释： http : //jsfiddle.net/6gk0hybj/5/

如果您希望它更具动态性，我们需要更改一些javascript。 让我知道您是否希望它更具动态性