[英]CSS - Add space between elements except the last one
On this jsfiddle you can see that I have 6 circles: 3 on the first row and 3 on the second row. 在这个jsfiddle上,您可以看到我有6个圆圈:第一行3个,第二行3个。
I'd like to add some space between them and was planning to use margin-right: 5px. 我想在它们之间添加一些空间,并计划使用margin-right:5px。 The issue if I do this is that the last elements (circle 3 and circle 6) will also have this extra 5px to their right which I don't want (since there's no elements next to them).
我这样做的问题是,最后一个元素(第3圈和第6圈)也将在其右边添加多余的5px,这是我不希望的(因为它们旁边没有元素)。 Is there a workaround to that?
有没有解决方法?
What I need is: 我需要的是:
(Circle 1) 5px space (Circle 2) 5px space (Circle 3) (第1圈)5像素空格(第2圈)5像素空格(第3圈)
Thanks 谢谢
HTML: HTML:
<div class="circle circlebackground">
<p>Circle 1</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 2</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 3</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground clear">
<p>Circle 4</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 5</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 6</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
CSS: CSS:
.circle {
float: left;
margin-bottom: 10px;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circlebackground {
background: #fff;
border:1px solid #37629B;
}
.innercircle {
position: absolute;
background: red;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.circle p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
}
.innercircle p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
opacity: 1;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}
.circle:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.circle:hover .innercircle {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.circle:hover .innercircle p {
opacity: 1;
}
.clear {
clear: both;
}
You can use this type of css if you really want to give margin-right. 如果您确实想提供保证金权利,则可以使用这种类型的CSS。
.circle {
float: left;
margin-bottom: 10px;
width: 200px;
height: 200px;
border-radius: 50%;
margin-left:5px; /*added*/
position: relative;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circle:nth-of-type(3n+0) {
margin-right:0px;
}
add another class for your last div and there mention margin-right:0;
为您的最后一个div添加另一个类,并提到
margin-right:0;
MARK-UP:: 加价::
<div class="all_circles">
</div>
<div class="all_circles">
</div>
<div class="all_circles last_circle">
</div>
CSS:: CSS ::
.all_circles{
margin-right:5px;
}
.last_circle{
margin-right:0;
}
now in this example .all_circles
is aplied to every div which have margin-right:5px;
现在在这个例子中,
.all_circles
被加到每个具有margin-right:5px;
div上margin-right:5px;
and change it for the last div by adding an extra class where margin-right:0;
并在最后一个div处更改它,方法是在
margin-right:0;
处添加一个额外的类margin-right:0;
note:: in this case the additional style, ie .last_circle
must be defined after defining .all_circles
because here .last_circle
will override the margin property of .all_circles
注意::在这种情况下,更多的风格,即
.last_circle
必须在定义后定义.all_circles
因为这里.last_circle
将覆盖margin属性.all_circles
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.