Question

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

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

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

＆＃13;

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 {
}

＆＃13;

    <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>

＆＃13;

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 Fiddle：https://jsfiddle.net/bLm9antL/7/

如何保持div元素不重叠父div？

3 个答案: