时间戳

首页 > 解决方案 > 并排显示元素 html/css

html - 并排显示元素 html/css

问题描述

我添加了我的 html 代码，然后在下面添加了我的 css 代码，当在浏览器中这些图片完全重叠显示时，并排放置两张相同的图片？我放置了显示内联块，但它们仍然显示在顶部并且无法弄清楚让它们移动

<div class="container">
        <img src="mole-head.png" alt="mole head" id="img1">
        <img src="mole-hill.png" alt="mole hill" id="img2">
        </div>
        <div class="container">
          <img src="mole-head.png" alt="mole head" id="img1">
          <img src="mole-hill.png" alt="mole hill" id="img2">
          </div>


.container {
    position: relative;
    width: 640;
    height: 482;
    display: inline-block;
}

#img1 {
    position: absolute;
    height: 356px;
    width: 376px;
    left: 109px;
}

#img2 {
    position: absolute;
    height: 220px;
    width: 640px;
    top: 262px;

标签： htmlcss

解决方案

我发现了你的问题，看起来你在你的 css 中忘记了一些东西。您忘记在课堂上添加单元.container

<div class="container">
  <img src="mole-head.png" alt="mole head" id="img1" />
  <img src="mole-hill.png" alt="mole hill" id="img2" />
</div>
<div class="container">
  <img src="mole-head.png" alt="mole head" id="img1" />
  <img src="mole-hill.png" alt="mole hill" id="img2" />
</div>

.container {
  position: relative;
  width: 640px;
  height: 482px;
  display: inline-block;
}

#img1 {
  position: absolute;
  height: 356px;
  width: 376px;
  left: 109px;
}

#img2 {
  position: absolute;
  height: 220px;
  width: 640px;
  top: 262px;
}

推荐阅读