时间戳

首页 > 解决方案 > div 不支持两张图片

html - div 不支持两张图片

问题描述

我试图制作两个单独的 div，并附有不同的图像。问题是当我放置多个 div 时，第二个或第三个图像会消失，只有 CSS 文档中的第一个会出现。

HTML：

<div class="tokens">
  <div class="imageGriff", id="testphoto"></div>
  <div class="imageGriff" type="image" id="testphoto2"></div>
  <div class="imageSly", id="testphototwo"></div>
</div>

CSS：

.imageSly {
  content: url("/t2.png");
  position: relative;
  display: inline;
}​

.imageGriff{
   content: url("/token.png") no-repeat;
   position: relative;
   display: inline;
}​

当我有两个带有 imageSly 的 div 时，这就是我得到的。其中 2 个将出现 2 个元素，但没有 imageGriff 元素。

标签： htmlcss

解决方案

由于语法错误，您的代码无法正常工作。

  • 逗号不用于分隔 HTML 属性
  • contentcss 属性不希望包含no-repeat在其中

.imageSly {
  content: url("//placehold.it/200x100");
  position: relative;
  display: inline;
}

.imageGriff {
  content: url("//placehold.it/300x150");
  position: relative;
  display: inline;
}
<div class="tokens">
  <div class="imageGriff" id="testphoto"></div>
  <div class="imageGriff" id="testphoto2"></div>
  <div class="imageSly" id="testphototwo"></div>
</div>

推荐阅读