Question

我正在尝试制作一系列用户可以填写的表单，并添加尽可能多的表单。这些形式的高度会有所不同（稍后重要），可以最小化。现在，我将它们放在一个由固定位置div包围的表中，并带有溢出自动。他们在桌子上的原因是我可以将它们粘在页面底部，无论高度如何。我想要的是表格单元格像书中的页面一样，我希望创建的每个新表单都位于前一个表格旁边，直到没有更多的空间。当页面的宽度已经填充时，我希望它们开始重叠，以便均匀地分隔它们。此外，当单击一个表单时，它将被带到前面。下面是一张粗略的图纸和我到目前为止的例子。

这是我头脑中的愚蠢，所以如果你发现任何令人困惑的请问。

问题：我想要的是表格单元格与书中的页面类似，我希望创建的每个新表单都与前一个单元格相邻，直到没有更多空间。当页面的宽度已经填充时，我希望它们开始重叠，以便均匀地分隔它们。此外，当单击一个表单时，它将被带到前面。下面是一张粗略的图纸和我到目前为止的一个例子。我该怎么做？

Pages in a book

＆＃13;

$('#AddForm').click(function (){
  var Target = $('#Fixed').find('tr');
  var height = Math.random() * (100 - 50) + 50;
  var HEX = '3456789ABCD';
  var Color = '#';
  for (var i = 0; i < 6; i++ ) {
      Color += HEX[Math.floor(Math.random() * 11)];
  }
  var Form = $("<div>Form</div>").css("background", Color).css('height', height+"px");
  var Cell = $("<td class='Form' valign='bottom'></td>")
  Cell.append(Form)
  Target.append(Cell)
});

＆＃13;

#Fixed{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
}
.FullWidth{
  width: 100%
}
.Form div{
  width: 200px;
  white-space:nowrap;
}
#AddForm{
  position: absolute;
  z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='AddForm'>Add Form</button>
<div id='Fixed'>
  <table>
    <tbody>
      <tr>
        <td class='FullWidth'></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

我使用flexbox完成了这项工作。这是css，剩下的就是小提琴：

#fixed{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-self: flex-end;
  align-items: flex-end;
}

.form{
  width: 200px;
  white-space:nowrap;
  display: flex;
  flex-flow: column wrap;
  opacity: 0.8;
}

.form + .form{margin: 0 0 0 -20px;}

#addForm{
  position: absolute;
  z-index: 999;
}

https://jsfiddle.net/7np8pm53/1/

在表中重叠单元格，如书中的页面

1 个答案: