无法使用CSS圆圈

ARNAB Chatterjee的维克拉姆，sbeliv01都正确产生的div之间的填充。我做错的另一件事是定位图标文字顶部而不是保证金顶部。卢克指出，使用顶部放置在容器外部。

我有一组包含通过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; 

}

来源

2015-05-21 Matt

只是一个抬起头来，你定位了文字，以便它们不在圆圈内。填充也指内部文本和元素边界之间的空间，而边距则是其他元素之间的间距。可能是你想要的边距。 – Luke

只需添加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; 
}

来源

2015-05-21 15:04:55 sbeliv01

与此相关的问题是处理响应性中断的代码。它只显示一列中的所有内容，无论浏览器的宽度如何。 – Matt

包括jQuery库+插件的小提琴没有正确设置。请参阅更新的小提琴 - https://jsfiddle.net/p5moyg6g/4/。这是不是所需的输出？ – sbeliv01

只需添加类：

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

来源

2015-05-21 15:05:13 arnabkaycee

该解决方案打破了响应能力，只在一列中显示所有内容。 – Matt

您应该使用保证金/下边距为填充是边框和内容之间空间。对你来说，你正在使用的边界和边界半径，使其循环，这意味着你在填充无论您使用的是刚刚扩大你的界限元素

之间没有间隔

你应该使用以下代替

.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; 
}

来源

2015-05-21 15:08:53

无法使用CSS圆圈

回答

相关问题