表格中的单元格与书中的页面重叠 [英] Overlapping cells in table like pages in a book

问题描述

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

这是我的脑海中的垃圾，所以如果你发现任何混淆，请问。

问题：我想要的是表单单元的行为与书中的页面类似，我希望每个新表单都被创建为坐在旁边，直到没有更多空间。当页面的宽度已经填满时，我希望它们根据需要开始重叠以均匀地分隔它们。同样当一个表单被点击时它会被带到前面。下面是一幅粗略的图画和我到目前为止的一个例子。我如何做到这一点？

页面在书中

$（'＃AddForm'）。单击（函数（）{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>表单< / div>）.css（background，Color）.css（'height'，height +px）; var Cell = $（< td class ='Form'valign ='bottom'> < / td>）Cell.append（Form）Target.append（Cell）}）;

  #Fixed {position：fixed;底部：0;正确：0; width：100％;}。FullWidth {width：100％}。Form div {width：200px; white-space：nowrap;}＃AddForm {position：absolute; z-index：999;}  

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><button id ='AddForm'>添加表单< / button> < div id ='Fixed'> <表> < TBODY> < TR> < td class ='FullWidth'>< / td> < / TR> < / tbody的> < / table>< / div>

解决方案

我用flexbox做了这个工作。这是CSS，其余的在小提琴中：

  #fixed {
 position：fixed; 
 bottom：0; 
 right：0; 
宽度：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：列换行; 
不透明度：0.8; 
} 
 
 .form + .form {margin：0 0 0 -20px;} 
 
 #addForm {
 position：absolute; 
 z-index：999; 
} 
  

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

I am trying to make a series of forms that the user can fill out and add as many forms as one would like. These forms will vary in height (Important later) and can be minimized. Right now I have them in a table surrounded by a fixed position div with overflow auto. The reason they are in a table is so I can have them glued to the bottom of the page no matter the height. What I want is for the table cells to act kind of like pages in a book, I want every new form created to sit next to the previous one until there is no more space. When the width of the page has been filled I want them to start overlapping as much as needed to evenly space them. Also when a form is clicked It would be brought to the front. Below is a crude drawing and an example of what I have so far.

This is Gibberish in my head so if you find any of it confusing please ask.

Question: What I want is for the table cells to act kind of like pages in a book, I want every new form created to sit next to the previous one until there is no more space. When the width of the page has been filled I want them to start overlapping as much as needed to evenly space them. Also when a form is clicked It would be brought to the front. Below is a crude drawing and an example of what I have so far. How do I do this?

Pages in a book

$('#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)
});

#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;
}

<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>

解决方案

I made this work with flexbox. Here's the css, the rest is in the fiddle:

#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/

这篇关于表格中的单元格与书中的页面重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！