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を下に追加します。.innerdivcontainertable

4

3 に答える 3

2

あなたのdivには使用しないposition: absoluteでください、juseはそれらを左にフロートさせます、そしてそれらは並んでいます、さもなければあなたは位置（上、左）を計算する必要があります

float: left;
于 2013-01-22T13:05:28.800 に答える
0

絶対的に配置されたdivは、他のdivまたはhtml要素に関係なく、最終的なレンダリング位置を持ちます。言い換えると、絶対的に配置された要素は、通常の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 に答える