我希望大家都能听到便利贴。我想堆栈这样的东西。所以这是我到现在为止的方法。我不知道如何使它可以扩展任何数量的粘性物,而不使用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>
问题:
注意:我准备好提供信息。我不明白为什么这个问题会获得接近的投票!
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/
更多推荐
可扩展的方式在CSS堆叠
发布评论