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

修改一旦position:absolute div中没有元素，就会从.innerdiv删除container来解决初始问题。我在容器div中有一个表，并建议解决方案在table下面添加子div，我实际上想在`table'行上显示。

Answer 1

不要将position: absolute用于你的div，juse将它们浮动到左边，它们将是并排的，否则你需要计算位置（上，左）

float: left;

Answer 2

无论其他div或html元素如何，绝对定位的div都有自己的最终渲染位置。换句话说，绝对定位的元素不会破坏普通html元素的自然布局。

因此，您必须手动保持位置x，y变量并在附加每个div时增加它们，或者使它们浮动并添加它们。

Answer 3

希望如此：http://jsfiddle.net/EDpQw/就是您所需要的

.innerdiv
{
  z-index:1;
  background-color: #D57657;
  float: left;
}

并排显示z-indexed div

3 个答案: