[英]inline-block overflowing on the height of its container?
I had this color-container: 我有这个颜色容器:
<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>
And the CSS: 和CSS:
.color-container {
width: 300px;
height: 320px;
position: relative;
text-align: center;
margin: auto;
}
But my children are overflowing the height of the parent color-container? 但是我的孩子们溢出了父母颜色容器的高度吗? the children have same style like this:
孩子们有这样的风格:
#green {
height: 150px;
width: 150px;
background-color: green;
border-radius: 0 100% 0 0;
border: solid #333333;
border-width: 2px 2px 1px 1px;
}
The class inline
is as below: 该类的
inline
如下:
.inline {
display: inline-block;
}
I was expecting it not to overflow, but this is the result: 我期望它不会溢出,但这是结果:
You should minimize the width and height according to the border as the border is 3px
in total (both horizontally and vertically). 您应该根据边框最小化宽度和高度,因为边框总共为
3px
(水平和垂直)。 and float:left;
和
float:left;
.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; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.