Question

我有一个容器，我想把主题放在那里。问题是字符串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的居中功能

Answer 1

使用额外的包装器获取父级的100％宽度。即我已添加<div class='customPadding'>并将您的.subName定位为绝对定位。

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

fiddle

以Pixel为单位设置Circle的宽度和高度属性，而不是百分比。

原因：圆形圆度完全取决于容器DIV，如果父级的宽度和高度发生变化，则圆圈可能看起来像椭圆。 Atleast将width和height属性分配给相同的百分比。

您的maths div工作正常，因为它从内部框中占用100％（即不包括填充，边距和边框）。如果你想要它占据完整的空间，把它放在容器外面，并按照上面的建议绝对放置它。

Answer 2

＆＃13;

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

＆＃13;

<div class="clsUserSubjects">
  <div id="maths" class="clsUserSubject">
    <div class="clsSubjectCircle">
      <div class="subName">Maths</div>
      <div class="completion">0%</div>
    </div>
  </div>
</div>

＆＃13;

父级填充不会影响子宽度

2 个答案: