修复了多个不重叠的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;
}

我希望每个块如下：

但结果是，我的块重叠并且没有按我的意愿分开

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>

Answer 2

包裹您的物品，然后只将固定位置设置为包装，如下所示：

.fixme {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 150px;
  max-width: 50%;
  z-index: 1;
}

.fixme .item {
  padding: .5rem;
  text-align: center;
  background-color: #fff;
  border: 3px solid #000;
  margin: 10px;
}

body {
  font: .8rem/1.2 sans-serif;
}

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

Answer 3

您为所有项目使用相同类的问题。

将.fixme设置为整体div并将所有四个项目作为其子元素.fix提及

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

<div class="fixme">
<div class="fix">Fixed 1</div>
<div class="fix">Fixed 1</div>
<div class="fix">Fixed 1</div>
<div class="fix">Fixed 1</div>
</div>