html - 修复了多个不重叠的 div 标签

Question

我有以下代码块:

<div class="fixme">Fixed 1</div>
<div class="fixme">Fixed 2</div>
<div class="fixme">Fixed 3</div>
<div class="fixme">Fixed 4</div>

和CSS:

.fixme {
  position: fixed;
  right: 0; 
  bottom: 0; 
  width: 24%; 
  text-align: center; 
  padding: 2%; 
  z-index: 1;
  background-color:red;
}

我想要每个 block 如下:

但结果，我的 block 是重叠的，没有按照我的意愿分开

http://jsfiddle.net/uacqjs91/

Answer 1

只需包装您的标签 div，并将位置 css 添加到包装器

.wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 24%;
  z-index: 1;
}

.fixme {
  text-align: center;
  padding: 2%;
  margin-bottom: .5rem;
  background-color: red;
}

.fixme:last-child {
  margin-bottom: 0;
}

<div class="wrapper">
  <div class="fixme">Fixed 1</div>
  <div class="fixme">Fixed 2</div>
  <div class="fixme">Fixed 3</div>
  <div class="fixme">Fixed 4</div>
</div>