可扩展的方式在CSS堆叠

本文介绍了可扩展的方式在CSS堆叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我希望大家都能听到便利贴。我想堆栈这样的东西。所以这是我到现在为止的方法。我不知道如何使它可以扩展任何数量的粘性物，而不使用JavaScript。

I hope everyone will have heard about Sticky Notes. I wanna stack stuff like that. So this is the approach I have till now. I am not sure how to make it scalable for any number of stickies, without using 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>

每个粘滞便笺都有可变高度， 可以固定 width 。请不要硬编码 height 。

I cannot keep on adding .stickynote + .stickynote + .stickynote for all.

Is the approach (HTML Structure) correct?

It is not a good idea to nest them, as they will not be semantically correct. If that was possible, I would have used nested <ul> and <li>, but I want all those stickies be siblings.

Every sticky note has varible heights and may be fixed width. Please don't hardcode the height.

注意：我准备好提供信息。我不明白为什么这个问题会获得接近的投票！

Note: I am ready to provide as much as information. I don't see why this question gets close votes!

推荐答案

可以使你的元素浮动，并给他们一个负余量的期望的效果。 < div class =nofloat>浮动框< / div> 是使每个注释跳过一行。可见性设置为hidden，因此元素仍会影响布局。

You can make your elements float and give them a negative margin for the desired effect. The <div class="nofloat">Floating box</div> is to make every annotation skip a line. The visibility is set to hidden so that the element still affects the layout.

<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例如：jsfiddle/1nu02a37/

jsfiddle for example : jsfiddle/1nu02a37/