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

我有一個容器，我想將主題放在上面。問題是字符串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-width到width並添加height解決了這個問題，但它影響兒童爲中心的功能的div

來源

2015-09-28 Gops AB

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

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

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

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

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

fiddle

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

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

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

來源

2015-09-28 10:53:56 rajuGT

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

來源

2015-09-28 12:16:50 imGaurav

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

回答

相關問題