Question

黄点“ gif1”必须放在黑框“ gif”内，但是正如您所看到的，我以某种方式设法做到了相反。

我做错了多少事？

我已经尝试过overflow:auto或hidden，并将position的属性从relative更改为absolute，反之亦然。

<html>

<head>

  <body>
    <center>
      <div class="container">
        <div class="img_sx"></div>
        <div class="img_dx"></div>
        <div class="quote"></div>
        <div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
        <div class="burp"></div>
        <div class="prot"></div>
      </div>
    </center>

    <style>
      .container {
        width: 550px;
        height: 430px;
        background-color: burlywood;
        display: table;
      }
      
      .img_sx {
        width: 250px;
        height: 430px;
        background-color: cadetblue;
        position: absolute;
        overflow: hidden;
      }
      
      .img_dx {
        width: 210px;
        height: 390px;
        background-color: cornflowerblue;
        margin-left: 250px;
        margin-top: 20px;
        position: relative;
        float: left;
      }
      
      .quote {
        width: 230px;
        height: 100px;
        background-color: coral;
        margin-left: 250px;
        margin-top: 30px;
        position: relative;
      }
      
      .gif {
        width: 230px;
        height: 100px;
        background-color: black;
        margin-left: 250px;
        margin-top: 10px;
        position: relative;
      }
      
      .gif1 {
        width: 90px;
        border-radius: 90px;
      }
      
      .gif2 {}
      
      .burp {
        width: 230px;
        height: 90px;
        background-color: white;
        margin-left: 250px;
        margin-top: 10px;
        position: relative;
      }
      
      .prot {}
    </style>

</head>
</body>

</html>

Answer 1

您正面临float属性造成问题的复杂情况。基本上，黄色的“图像”包裹在浮动元素周围，这就是为什么它从黑匣子中移出而在蓝色框（浮动元素）之下。为避免这种情况，您可以使用absolute代替float。

.container {
  width: 550px;
  height: 430px;
  background-color: burlywood;
  display: table;
  margin: auto;
}

.img_sx {
  width: 250px;
  height: 430px;
  background-color: cadetblue;
  position: absolute;
  overflow: hidden;
}

.img_dx {
  width: 210px;
  height: 390px;
  background-color: cornflowerblue;
  margin-left: 250px;
  margin-top: 20px;
  position: absolute;
}

.quote {
  width: 230px;
  height: 100px;
  background-color: coral;
  margin-left: 250px;
  margin-top: 30px;
  position: relative;
}

.gif {
  width: 230px;
  height: 100px;
  background-color: black;
  margin-left: 250px;
  margin-top: 10px;
  position: relative;
}

.gif1 {
  width: 90px;
  border-radius: 90px;
}

.gif2 {}

.burp {
  width: 230px;
  height: 90px;
  background-color: white;
  margin-left: 250px;
  margin-top: 10px;
  position: relative;
}

.prot {}

<div class="container">
  <div class="img_sx"></div>
  <div class="img_dx"></div>
  <div class="quote"></div>
  <div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
  <div class="burp"></div>
  <div class="prot"></div>
</div>

Answer 2

这是要走的路：

.gif{
    position: relative;
}

.gif1{
    position:absolute;
 }

希望有帮助。

图片（字面上）偏离了div

2 个答案: