我有以下代码块:
<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;
}
我希望每个块如下:
但是,结果是,我的块重叠了并且没有按照我的意愿分开
答案 0 :(得分:3)
只需包装标签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>
答案 1 :(得分: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>
答案 2 :(得分:2)
所有项目都使用同一类的问题。
将.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>