無法使用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圓圈

回答

相關問題