如何防止Div元素与父母div重叠

Question

我尝试将溢出设置为隐藏，但这切断了最终使父级重叠的图像。我希望它们被包含在父级中而不会被切断。我应该调整什么值以实现这一目标？

这是小提琴。

body {
  font-family: Europa;
  margin: 0 auto;
}
.box {
  position: relative;
  width: 600px;
  height: 500px;
  border-radius: 20px;
  border: solid #6441a5;
  background:#6441a5;
}
div {
  padding: 10px;
  width: 100px;
  width: 100px;
}
  div img {
  height: 100%;
  width: 100%;
  border-radius: 100px;
}
.results-wrap {
  height: 100%;
  position: absolute;
}

Answer 1

首先，删除div.box的固定height，然后将display: block添加到您的img，以便将它们堆叠在另一个下方

body {
  font-family: Europa;
  margin: 0 auto;
}
.box {
  position: relative;
  width: 600px;
  border-radius: 20px;
  border: solid #6441a5;
  background:#6441a5;
}
div {
  padding: 10px;
}
  div img {
  height: 100%;
  width: 100px;
  border-radius: 100px;
  display:block;
}
.results-wrap {
}

    <div class="header">
    </div>
    <div class="box">
      <div class ="results-wrap">
        <div class="results"><img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/>
        
        
        </div>
      </div>
    </div>

Answer 2

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

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

jsfiddle

Answer 3

使它们较小，使它们可以合适或仅删除不合适的图像：

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

JS小提琴：https：//jsfiddle.net/blm9antl/7/