CSS中的可伸缩堆栈方法

Question

我希望每个人都听说过“粘性笔记”。我想把那样的东西叠起来。这就是我到现在为止的方法。如果不使用JavaScript，我不知道如何使它对任意数量的粘贴具有可伸缩性。

​

* {
  font-family: 'Segoe UI';
}
.stickynote {
  position: absolute;
  background: #fc0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;
}
.stickynote + .stickynote {
  top: 20px;
  left: 20px;
}

.stickynote + .stickynote + .stickynote {
  top: 30px;
  left: 30px;
}

<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>

​

问题：

1. 我不能一直为所有人添加.stickynote + .stickynote + .stickynote。
2. 这种方法(HTML结构)正确吗？
3. 嵌套它们不是一个好主意，因为它们在语义上是不正确的。如果可能的话，我会使用嵌套的<ul>和<li>，但是我希望所有的粘贴都是兄弟姐妹。
4. 每一个便条都有不同的高度，并且可能是固定的width。请不要硬编码height。

注意：我准备提供尽可能多的信息。我不明白为什么这个问题会得到密切的投票！

Answer 1

你可以让你的元素浮动，并给它们一个负值，以达到预期的效果。<div class="nofloat">Floating box</div>将使每个注释跳过一行。可见性设置为隐藏，以便元素仍然影响布局。

<div class="floating-box1">Floating box1</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box2</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box3</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box4</div>

CSS：

.floating-box1 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
}
.floating-box {
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    margin-left:-160px; 
}
.nofloat{
    visibility:hidden;
}

例如：http://jsfiddle.net/1nu02a37/

Answer 2

编辑：我做到了:)。使用transform从注释的左上角旋转，然后从父div的左上角倒转。XD

您可以更改学位，只要父母是负的，相同的程度，对于不同的偏移度.

我已经吃了我自己的话，说没有编程你做不到.

我不知道如何重复其余的答案，这是旧的答案。

我能想到的最好的。

使用伪前后。

在创建“栏”之前，左边偏移量的宽度和设置的高度。所以，如果超过200磅的高度，它就会掉落到左边的家。

后面是显示粘滞字条的部分。

如果有人能够知道如何将其移动到元素本身，而不用使用title属性，那么我们就赢了！否则，这是在不创建额外元素的情况下可以得到的最接近的。它的语义和粘稠的音符差不多。非常有趣的问题！

HTML

<div class="stack">
  <div class="note" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></div>
  <div class="note" title="Sed ac tellus at quam convallis feugiat. Ut vehicula leo non tellus convallis, id faucibus quam varius. Sed feugiat nulla in elit dignissim condimentum."></div>
  <div class="note" title=""></div>
  <div class="note" title="Cras quis volutpat sapien. Mauris volutpat ultrices lacus eu accumsan. Cras tempor sapien maximus quam finibus, ullamcorper imperdiet mauris aliquam."></div>
</div>

CSS

.note:before {
  content: '';
  width: 20px;
  height: 200px;
  float: left;
}
.note:after {
  content: attr(title);
  width: 200px;
  min-height: 200px;
  padding: 10px;
  background: khaki;
  box-shadow: 1px 2px 7px rgba(0,0,0,.3);
  border: khaki 1px outset;
  display: inline-block;
  margin: 10px 0 -190px 0;
}

Answer 3

这是一个非常有趣的问题。我想我要从语义上来看它，而不是实际地看代码。

我理解你为什么不想嵌套它们，起初我认为这样做在语义上似乎是错误的。但我觉得那就是你犯错误的地方。

想想一堆便笺。他们是在一起，还是被组合成另一个不同的“东西”？

在语义上，它们是一个堆栈。你可以看着它，说这是一个列表的明确的物理表示，其中ul是堆栈，li是注释。这是完全有语义意义的。

你也可以说，每个音符的物理位置取决于它前面那个音符的物理位置。你在物理上相互嵌套相关的音符(它们只是突出在右边和底部)，但是每个连续音符的组织取决于它前面的音符。有些人可能会说，这是一个设计的问题，而不是语义，但你为什么要堆叠笔记，如果它们在语义上没有关系开始？这意味着嵌套它们在语义上也是完全合理的。

在您的代码中，将它们并排放在一起，而不是与用户并排表示，对我来说，在语义上似乎毫无意义。除非您有一个父容器来表示堆栈。这意味着您实际上只是使用其他元素来表示ul/li。