内联块溢出其容器的高度？

Question

我有这个颜色容器：

<div class="color-container">
   <div class="inline" id="red"></div>
   <div class="inline" id="green"></div>
   <div class="inline" id="yellow"> </div>
   <div class="inline" id="blue"> </div>
</div>

CSS：

.color-container {
  width: 300px;
  height: 320px;
  position: relative;
  text-align: center;
  margin: auto;
 }

但我的孩子们正在溢出父色容器的高度？孩子们有这样的风格：

#green {
  height: 150px;
  width: 150px;
  background-color: green;
  border-radius: 0 100% 0 0;
  border: solid #333333;
  border-width: 2px 2px 1px 1px;
}

课程inline如下：

.inline {
  display: inline-block;
}

我原以为它不会溢出，但这是结果：

Answer 1

您应该根据边框最小化宽度和高度，因为边框总共3px（水平和垂直）。和float:left;

＆＃13;

＆＃13;

.color-container {
  width: 300px;
  height: 320px;
  position: relative;
  text-align: center;
  margin: auto;
 }
.color-container > div {
  float:left;
  height: 147px;
  width: 147px;
  background-color: green;
  border-radius: 0 100% 0 0;
  border: solid #333333;
  border-width: 2px 2px 1px 1px;
}
#red {
  background-color: red;
  border-radius: 100% 0 0 0;
}
#green {
  background-color: green;
  border-radius: 0 100% 0 0;
}
#yellow {
  background-color: yellow;
  border-radius: 0 0 0 100%;
}
#blue {
  background-color: blue;
  border-radius: 0 0 100% 0;
}
.inline {
  display: inline-block;
}

＆＃13;

<div class="color-container">
   <div class="inline" id="red"></div>
   <div class="inline" id="green"></div>
   <div class="inline" id="yellow"> </div>
   <div class="inline" id="blue"> </div>
</div>

＆＃13;

＆＃13;

＆＃13;