可扩展的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的左上角反转旋转.XD

只要父级为负值,您可以更改度数,以适应不同的偏移度...

我已经吃了自己的话,说如果没有编程就不能这样做......

我不知道如何重写其余的答案,这是旧答案.

我能想到的最好的.

之前和之后使用伪.

在创建"bar"之前,左边偏移的宽度和设置高度.因此,如果之后有超过200px的高度,它会回到原来的左边.

之后是显示便签的部分.

如果有人可以弄清楚如何将其移入元素本身,而不是使用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 2

您可以使元素浮动,并为所需效果赋予它们负余量.该<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;
}

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