Question

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

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。如果您希望它更具活力，请告诉我们

显示div与另一个div旁边的相对位置

1 个答案: