0

我有一个容器 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

编辑一旦div中没有元素，就可以通过删除position:absolute来解决最初的问题。我的容器 div 中有一个表格，建议的解决方案将子 div 添加到我实际想要显示在“表格”行上的子 div 下方。.innerdivcontainertable

4

3 回答 3

2

不要position: absolute用于您的 div，将它们浮动到左侧，它们将并排，否则您需要计算位置（顶部，左侧）

float: left;
于 2013-01-22T13:05:28.800 回答
0

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

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

于 2013-01-22T13:06:41.327 回答
0

希望这个： http: //jsfiddle.net/EDpQw/是你所需要的

.innerdiv
{
  z-index:1;
  background-color: #D57657;
  float: left;
}
于 2013-01-22T13:10:33.727 回答