2015-09-28 151 views
0

Demo父母上的填充不會影響孩子的寬度

我有一個容器,我想將主題放在上面。問題是字符串maths沒有取其父級的100%寬度。

我懷疑這是因爲父母的填充。我想達到同樣的設計,但Maths串應居中,並充分寬度[包括填充]父

.clsSubjectCircle { 
border: 1px solid; 
border-radius: 50%; 
margin: 0 auto; 
padding: 30px; 
position: relative; 
top: 22%; 
max-width: 22%; 
overflow: hidden; 
} 

,並告訴我都在我的設計不好的做法。

Demo2解釋了這個問題。我可以理解,填充引起該問題

更改max-widthwidth並添加height解決了這個問題,但它影響兒童爲中心的功能的div

+0

我不知道你想要什麼。你是否期望字體大小根據其容器的寬度進行調整?這很不尋常,不是微不足道的,但可以使用'vw'單位完成。 –

+0

不,我想'數學'div的寬度是其父母的100%,在這種情況下,父母是'圓的父母' –

+0

我仍然不明白。你能用盡可能少的代碼提供一個簡單的例子嗎? –

回答

0

使用另外的包裝帶父的寬度爲100%。即我添加了<div class='customPadding'>並將您的.subName定位爲絕對位置。

 <div class="subName">Maths</div> 
     <div class='customPadding'> 
      <div class="completion">0%</div> 
     </div> 

fiddle

的像素,而不是百分比來設置圓的寬度和高度屬性。

原因是:圈圓度完全取決於容器DIV,如果父的寬度和高度變化時,你的圓可能看起來像橢圓。至少將寬度和高度屬性分配給相同的百分比。

您的maths div正常工作,因爲它從內框(即不包括填充,邊距和邊框)需要100%。如果您希望獲取完整空間,請將其放置在容器外,並按照上面提到的方法完全放置。

0

.clsUserSubjects { 
 
    border: 1px solid; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.clsUserSubject { 
 
    border: 1px solid red; 
 
    height: 200px; 
 
    margin: 1%; 
 
    width: 200px; 
 
} 
 
/* 
 
.subName { 
 
    align-self: center; 
 
    border: 1px solid; 
 
    border-radius: 50%; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    width: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
}*/ 
 

 
.clsSubjectCircle { 
 
    border: 1px solid; 
 
    border-radius: 50%; 
 
    padding: 30px; 
 
    position: relative; 
 
    height: 138px; 
 
    width: 138px; 
 
    overflow: hidden; 
 
} 
 
.completion { 
 
    text-align: center; 
 
} 
 
.subName { 
 
    text-align: center; 
 
}
<div class="clsUserSubjects"> 
 
    <div id="maths" class="clsUserSubject"> 
 
    <div class="clsSubjectCircle"> 
 
     <div class="subName">Maths</div> 
 
     <div class="completion">0%</div> 
 
    </div> 
 
    </div> 
 
</div>

相關問題