可扩展的方式在CSS堆叠 [英] Scalable way to stack in 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>

问题：

1. 我不能继续添加 .stickynote + .stickynote + .stickynote


2. 这种方法（HTML结构）是否正确？


3. 因为它们不会在语义上正确。如果可能的话，我会使用嵌套的< ul> 和< li>


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

1. I cannot keep on adding .stickynote + .stickynote + .stickynote for all.
2. Is the approach (HTML Structure) correct?
3. 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.
4. 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例如：http://jsfiddle.net/1nu02a37/

jsfiddle for example : http://jsfiddle.net/1nu02a37/

这篇关于可扩展的方式在CSS堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！