Question

更新

Arnab Chatterjee，Vikram，sbeliv01都是正确的。我做错的另一件事是用 top 而不是 margin-top 来定位图标文本。卢克指出，使用顶部将它放在容器外面。

我有一组包含CSS绘制的圆圈的div。 div根据浏览器的宽度自动重新排列（我使用混合库）。但是，我在圆圈下方写下的文字在彼此对齐时与其下方的圆圈重叠。我试图向圆圈添加填充，但这只是设法使圆圈更大。有没有办法可以为每个div添加填充，这样当它们位于彼此之上时它们不会重叠？

以下是我的尝试

https://jsfiddle.net/p5moyg6g/2/

HTML

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="mix iconcircle"><div class="icontext">Icon 1</div></div>
        <div class="mix iconcircle"><div class="icontext">Icon 2</div></div>
        <div class="mix iconcircle"><div class="icontext">Icon 3</div></div>
        <div class="mix iconcircle"><div class="icontext">Icon 4</div></div>

    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.container').mixItUp();
        });
    </script>
</body>

CSS

body{
   background:black;
}

.container{
   padding:50px;
}
.container:after{
   content: '';
   display: inline-block;
   width: 100%;
   padding-bottom:50px;
}
.mix{
   color:white;

}

.iconcircle{
   background-color: rgba(204, 0,102,0);
   border: 4px solid #FFF;
   height: 180px;
   width: 180px;
   border-radius: 50%;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
}

.icontext{
   position:relative;
   width:180px;
   text-align:center;
   top:200px;

}

Answer 1

只需将margin-bottom添加到.iconcircle类，即可在圈子之间添加一些间距。

https://jsfiddle.net/p5moyg6g/4/

.iconcircle{
    background-color: rgba(204, 0,102,0);
    border: 4px solid #FFF;
    height: 180px;
    width: 180px;
    margin-bottom: 4em;
    border-radius: 50%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

Answer 2

只需添加课程：

    .mix.iconcircle {
        margin-bottom: 20px;
    }

Answer 3

您应该使用margin / margin-bottom，因为填充是边框和内容之间的空间。在你的情况下，你使用border和border-radius使它成为圆形，这意味着你在填充中使用的任何东西，你只是扩展边界而不是元素之间的间距

你应该使用以下代替

.iconcircle{
    background-color: rgba(204, 0,102,0);
    border: 4px solid #FFF;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    margin-bottom : 15px;
}

无法使用css圈

3 个答案: