jquery - 并排显示 z 索引的 div

Question

我有一个容器 div 和一个带有以下标记和 CSS 的按钮

HTML:

<div class="container">
  <table class="tbl">
    <tr><td></td></tr>
    <tr><td></td></tr>
  </table>
</div>

<button id="btnAdd" type="button">Add</button>

CSS:

.container{
  position:releative;
  background-color:#d0d0d0;
  widht:90%;
  height:50px;
}
.innerdiv
{
  position:absolute;
  z-index:1;
  background-color: #D57657;    
}
.tbl{
    border-collapse: collapse;
    width:100%;
    height:100%;
}
.tbl td
{
    border-bottom:1px solid #000;
}

我正在使用 jQuery 将子 div 动态添加到容器 div

$(function(){
  $("#btnAdd").click(function(){
      $(".container").append("<div class='innerdiv'>I am new</div>");
  });
});

问题是我通过单击按钮创建的所有 div 相互隐藏，我希望这些子 div 并排显示。我怎样才能做到这一点。你可能想看一下 jsFiddle

编辑 一旦 container< 中没有元素，最初的问题是通过从 .innerdiv 中删除 position:absolute 来解决的 分区。我的容器 div 中有一个表，建议的解决方案是在 table 下面添加子 div，我实际上想在“表”行上显示它。

Answer 1

不要为你的 div 使用 position: absolute，只要将它们 float 到左边，它们就会并排，否则你需要计算位置(顶部，左侧)

float: left;