父母上的填充不会影响孩子的宽度

我有一个容器，我想将主题放在上面。问题是字符串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

父母上的填充不会影响孩子的宽度

回答

相关问题