Child div same size as Parent Overflows 将子div设置为与父div相同的尺寸并溢出

7 浏览
0 Comments

Child div same size as Parent Overflows 将子div设置为与父div相同的尺寸并溢出

经过多次谷歌搜索，我无法找到为什么相同大小的父元素的子元素会溢出的原因。

例如

上面的代码显示，第一个子元素 div 标签的高度比父元素多 1px。而且当两个子元素的百分比宽度加起来等于 100% 时，父元素仍然无法容纳这两个 div。

0

3 答案

0 Comments

Child div同样大小的问题出现的原因是由于盒模型的影响，边框的大小会影响盒子的尺寸。解决方法可以通过设置box-sizing属性为border-box来解决，或者使用flexbox布局或float布局。如果必须使用inline-block布局，可以通过消除标签之间的空白字符或者注释来解决。

首先，box-sizing属性可以设置为border-box，这样边框的大小就不会影响盒子的尺寸。可以在全局CSS中设置该属性，或者在需要的地方直接设置该属性。例子代码如下：

其次，使用inline-block元素时，标签之间的空白字符会影响到渲染的内容。可以使用flexbox或float布局来解决这个问题。使用flexbox布局的例子代码如下：

使用float布局的例子代码如下：

如果必须使用inline-block布局，可以通过消除标签之间的空白字符或者注释来解决。例子代码如下：

以上是解决Child div同样大小的问题的原因和解决方法。希望对你有所帮助！

0
0 Comments

请检查以下代码：

这段代码无法将两个子元素放入父元素内。

嗨，朋友，请再次查看运行示例。我已经更新了代码，希望这次能对你有帮助。

0
0 Comments

问题出现的原因是子div的宽度没有按照父div的大小进行调整，导致子div溢出。解决方法是设置子div的宽度为100%。具体的代码如下：


  

  

  





div {
  box-sizing: border-box;
}
div > div {
  width: 100%;
}

通过设置子div的宽度为100%，子div将自动根据父div的大小进行调整，解决了子div溢出的问题。另外，为了确保子div的宽度计算准确，还需要设置`box-sizing: border-box;`，以考虑边框的宽度。这样，子div的宽度将包括边框的宽度，而不会溢出父div。

0