我希望每个人都听说过便利贴。我想堆叠这样的东西。所以这是我到目前为止的方法。我不确定如何在不使用 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>
问题:
- 我无法继续添加
.stickynote + .stickynote + .stickynote
对所有人。 - 方法(HTML 结构)是否正确?
- 将它们嵌套 不是一个好主意,因为它们在语义上是不正确的。如果可能的话,我会使用嵌套
<ul>
和<li>
,但我希望所有这些便签纸都是 sibling 。 - 每个便签的高度都是可变的,可能是固定的
width
.请不要硬编码height
.
Note: I am ready to provide as much as information. I don't see why this question gets close votes!
最佳答案
编辑:I did it :).使用变换从音符的左上角旋转,然后从父 div 的左上角反转旋转。 XD
您可以更改度数,只要父项对于不同的偏移度数是负的相同度数...
我自己说过没有编程就做不到...
我不知道如何强调答案的其余部分,这是旧答案。
The best I could come up with.
前后使用伪。
在创建一个“bar”之前,左边偏移的宽度和设置的高度。因此,如果 after 的高度超过 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;
}
关于html - 在 CSS 中堆叠的可扩展方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31055107/