如何使流體寬度爲一個圓的元素

Question

我有一些div s包含文本。我希望他們是圈子，文字應該適合他們。

我試過border-radius屬性設置爲50%，但

• 他們成了橢圓形，因爲width在%和變化的基礎上視，所以我不能使其height是相同的金額。
• 文字可能會溢出橢圓形。

<div class="col3"> 
    Some content 
</div> 

.col3 { 
    background-color: #3cb371; 
    border-radius: 50%; 
    float: left; 
    margin: 10px; 
    padding: 5px 10px; 
    width: 30%; 
} 

Fiddle

請讓我知道我錯了。

Answer 1

您可以使用這一招得到一個1：1的比例：

<div class="circle"> 
    <div class="content"> 
     Some content 
    </div> 
</div> 

.circle { 
    position: relative; 
    background-color: #3cb371; 
    border-radius: 50%; 
    padding: 5px 10px; 
    width: 30%; 
} 
.circle:before { 
    content: ''; 
    display: block; 
    margin-top: 100%; /* 1:1 ratio */ 
} 
.content { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    overflow: auto; 
} 

Demo

或者，如果你想強制文本是圈子裏面，

.content { 
    top: 15%; right: 15%; bottom: 15%; left: 15%; 
} 

其中15%是(1-Math.cos(Math.PI/4))/2*100

Demo