html - 图像(字面意思)远离 div-6ren

html - 图像(字面意思)远离 div

转载作者：行者123 更新时间：2023-11-28 14:32:09

黄点“gif1”必须进入黑框“gif”，但如您所见，我以某种方式设法做了相反的事情。

我做错了多少事？

Livewave Preview

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

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

最佳答案

您正面临着 float 属性造成问题的复杂情况。基本上，黄色“图像”环绕着 float 元素，这就是为什么它从黑框出来并在蓝色框( 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>

关于html - 图像(字面意思)远离 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54055295/