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

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

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

25

4

黄点“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/

25

4

0

文章推荐： css - 无法流畅地动画 flexbox-direction

文章推荐： javascript - React 应用程序中不受控制的输入字段是什么

文章推荐： html position absolute 防止onclick点击

JavaScript:意思？
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
python - 装箱(意思)
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
c - 返回什么；意思？
在main()中声明其原型(prototype)的函数的返回数据类型为void。它包含一个指令返回；如 main() { void create(int *p); *some code
scala 奇怪的符号 "_@"意思
我想知道这个 scala 符号是什么:_@。 (搜索引擎无法识别奇怪的字符，因此很难在 google 上找到任何内容...) 这里是上下文: def doNodeParse(json: JValue)
gcc - 什么 '__asm__(".previous");'意思？
在尝试编译我的项目时，它使用了一些第三方头文件，使用 mingw 4.4，我遇到了以下错误: Assembler messages: Error: junk at end of line, first
c - 什么 ((void (*)())buf)();意思？
我正在解决 picoCTF 上的二进制漏洞利用挑战，并遇到了这段代码: ((void (*)())buf)(); 哪里buf是一个字符数组。我解决了挑战，但似乎无法理解它到底在做什么。我看了this
javascript - export default something() 意思
我正在浏览 React Navigation docs我在那里遇到了这样的事情: import Ionicons from 'react-native-vector-icons/Ionicons';
selenium -//按钮[@type ='submit']意思
selenium 中以下命令的含义是什么？我尝试创建一个自动测试用例。然后如下://button[@type='submit'] 我在 selenium 工具中看到的语法。最佳答案这是一个 XP
c - a[0] 在多维数组中表示(意思)是什么？
我刚开始看书学习 C 语言，对他们讨论指针和数组的部分并没有感到困惑。如果有一个名为 a[NUM_ROW][NUM_COLS] 的多维数组(我只是将此数组讨论为特定的二维数组)，那么 a[0] 是什么
c - while (*p2++ = *p1++); 是做什么的？意思？
这个问题在这里已经有了答案: How does "while(*s++ = *t++)" copy a string? (17 个答案) 关闭 9 年前。我有一个代码块: int main ()
linux - 什么信号(SIGCHLD，SIG_DFL);意思？
我没有在我的代码中处理 SIGCHLD。我的进程在终止后仍然立即被删除。我希望它成为僵尸进程。如果我将 SIGCHLD 设置为 SIG_DFL 那么它会起作用吗？如何将 SIGCHLD 设置为 SI
python - fig, ax = plt.subplots() 意思
我已经使用 matplotlib 一段时间了，但我并不真正理解这一行的作用。 fig, ax = plt.subplots() 谁能解释一下？最佳答案 plt.subplots() 基本上是一个(非
c - double* (*p[3]) (void* (*)()); 是什么意思？意思？
我很难理解以下声明的含义。这个申报标准吗？ double* (*p[3]) (void* (*)()); 谁能帮我理解这个声明的意思？最佳答案阅读复杂声明的规则:找到最左边的标识符并向外工作，记住
c - 这个声明 typedef void foo(); 是什么意思？意思？
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 8 年前。 Improve t
shell - 1>/dev/null 2>&1 & pid1=$!意思？
我正在学习如何并行运行多个进程 ./script1.sh param1 1>/dev/null 2>&1 & pid1=$! ./script1.sh param2 1>/dev/null
javascript - 在 Chaplin js 框架中，以 ! 为前缀的事件是做什么的？意思？
我看到这些事件散布在 chaplin 示例代码中，但在文档或源代码中没有任何解释。似乎这意味着它是一个全局事件，触发了一个 Action 。那是对的吗？它们只是一个惯例，还是以某种方式强制执行？ #
c - C 表达式 ((void(*)(void))0)(); 是什么意思？意思？
((void(*)(void))0)(); 所以我们将整数 0 类型转换为这个棘手的类型 (void(*))(void) 然后执行它。消息来源声称这应该有效，但实际上是什么？我想这一定是像 #def
javascript - following a function with (jQuery, window, document) 是什么意思？意思？
这个问题在这里已经有了答案: How does this JavaScript/jQuery syntax work: (function( window, undefined ) { })(win
fortran - 在 Fortran 中，.feq 有什么作用？或.fne。意思？
if(a .feq. 5.0_dp) then **** if(a .fne. 5.2_dp) then ***我遇到了一些这样的代码。 .feq 有什么作用？或.fne。意思？是“=”还是“\=”？
java - Java 中的通配符 Generic 和意思，下界或上界
所以我在阅读泛型方法时感到很困惑。先说一下这里的问题: 在这个例子中:假设我需要一个适用于任何类型 T 的 selectionSort 版本，方法是使用调用者提供的外部可比较对象。第一次尝试: pu

首页

博学

6Ren·AI

商城

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