Html 如何防止div元素与父div重叠？

我曾尝试将overflow设置为hidden，但这会切断最终与父div重叠的图像。我希望它们包含在父div中，而不会被切断。我应该调整什么价值来实现这一点

---

将它们缩小，以便它们可以容纳或仅删除不适合的图像：

div img {
  height: 100%;
  width: 75%;
  border-radius: 100px;
}

---

Js Fiddle:

将它们缩小，以便它们可以容纳或删除不适合的图像：

div img {
  height: 100%;
  width: 75%;
  border-radius: 100px;
}

---

Js Fiddle:

首先，移除

div.box的固定
高度
，然后将
display:block
添加到
img
中，以便它们一个接一个地堆叠在一起


正文{
字体系列：欧罗巴；
保证金：0自动；
}
.盒子{
位置：相对位置；
宽度：600px；
边界半径：20px；
边框：实心#6441a5；
背景#6441a5；
}
div{
填充：10px；
}
部门经理{
身高：100%；
宽度：100px；
边界半径：100px；
显示：块；
}
.结果总结{
}
首先，移除您的
div.box的固定
高度
，然后将
display:block
添加到您的
img
中，使其相互堆叠


正文{
字体系列：欧罗巴；
保证金：0自动；
}
.盒子{
位置：相对位置；
宽度：600px；
边界半径：20px；
边框：实心#6441a5；
背景#6441a5；
}
div{
填充：10px；
}
部门经理{
身高：100%；
宽度：100px；
边界半径：100px；
显示：块；
}
.结果总结{
}
我不知道您的.box高度是否必须固定在500px

.box {
  position: relative;
  width: 600px;
  /*height: 500px;*/
  border-radius: 20px;
  border: solid #6441a5;
  background:#6441a5;
}
.results-wrap {
  /*position: absolute;*/
}

我不知道您的.box高度是否必须固定在500px

.box {
  position: relative;
  width: 600px;
  /*height: 500px;*/
  border-radius: 20px;
  border: solid #6441a5;
  background:#6441a5;
}
.results-wrap {
  /*position: absolute;*/
}

绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。检查一下。盒子的固定高度为500px，那么不适合盒子的div到底应该怎么办？你的选项是隐藏的（你不喜欢），滚动条或删除高度，让它增加高度。绝对定位是一个非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。检查一下。盒子的固定高度为500px，那么不适合盒子的div到底应该怎么办？您的选项是隐藏的（您不喜欢），滚动条或删除高度，让它在高度上增长。