Html CSS文本格式

我试着让一些文本很好地漂浮在一些图像上。问题是我觉得我正在做的工作太多/杂乱无章，而且格式不正确

正在寻求帮助使此布局更平滑、更简单。我还需要能够引用每个部分的第一个数字，这样我就可以通过AngularJS点击更新它

我想要的是文本看起来像这样

这就是我目前正在尝试的：

再次，我试图找到一种方法，将此文本放置在所有图标上，就像上面的示例一样，同时能够达到事件的第一个数字

“end look”如下所示，我只需要帮助格式化第一行，这样我就可以看到应该如何处理其余的行

原始代码：

HTML

---

只需将您的图像放入span中，并在span中添加“x/y”文本。然后您就可以将它们完全放在span中，使用一些简单的css规则将它们全部放在正确的位置

  <span class="img">
    <img id="offense1-0" src={{pictures[0]}}>
    <span>0/3</span>
  </span>
  <span class="img">
    <img id="offense1-1" src={{pictures[1]}}>
    <span>1/3</span>
  </span>
  <span class="img">
    <img id="offense1-2" src={{pictures[2]}}>
    <span>2/3</span>
  </span>
  <span class="img">
    <img id="offense1-3" src={{pictures[3]}}>
    <span>2/3</span>
  </span>

0/3
1/3
2/3
2/3

---

我将您的Plunk分叉并简化了一点：

尝试考虑您的html。这将是我的选择：

 <div>
     <img id="offense1-0" src="" alt="pic">
     <span>1/1</span>
 </div>

---

检查结果：

如果您不想更改html代码，请将代码与以下内容结合使用

注意：number类中的span ID无效。ID不能以数字开头（有关详细信息，请查看此链接：）

如果你看下面的代码，我在你的数字ID前加了“num”。这将id格式从

id=“0-1”

更改为

id=“num0-1”

。然后，我从jquery中的id中删除“num”以定位关联的图像

HTML

<div id="container">
    <img id="iconImg0-1" class="iconImg" src="http://upload.wikimedia.org/wikipedia/commons/0/0e/App-icon.png">
    <img id="iconImg0-2" class="iconImg" src="https://www.bellbanks.com/wp-content/uploads/2013/02/mobile-app-icon.jpg">
    <div id="num0-1" class="iconNumber">0/3</div>
    <div id="num0-2" class="iconNumber">2/3</div>
</div>

JS

#container {
    width:200px;
    height:100px;
}
.iconImg {
    height:50px;
    width:50px;
    position:relative;
}
.iconNumber {
    position:absolute;
    background-color:rgba(180, 180, 180, 0.7);
    text-align:center;
}

var numIconNumber = $(".iconNumber").length;
for (var i = 0; i <= numIconNumber; i++) {
    var myId = $(".iconNumber:eq(" + i + ")").attr("id");
    var myIdNum = myId.replace("num", "");
    var myImg = $("#iconImg" + myIdNum);
    var myNum = $("#" + myId);
    myNum.css({
        width: myImg.width() + "px",
        left: myImg.offset().left + "px",
        top: (myImg.offset().top + myImg.height()) - myNum.height() / 2 + "px"
    });
}

var numIconNumber=$（“.iconNumber”）.length；
对于（var i=0；我建议您看看已经做了什么（因为您正在尝试实现的（LoL精通页面）已经在许多网站上做了多次）你可以看看其他HTML页面，想知道你正在做的是不是。“SIFU Trror，但是我第一次学习AngularJS，我不知道有任何页面使用该语言。大多数其他网站可能只是实现jQuery或者其他一些东西。你会考虑把代码<代码> IMG<代码>用div交换div吗？ode>背景图像

set？@SW4很好！什么都行。你建议我把数字包起来，以便在事件中读取它们？或者我只是通过

/

解析它？

<div id="container">
    <img id="iconImg0-1" class="iconImg" src="http://upload.wikimedia.org/wikipedia/commons/0/0e/App-icon.png">
    <img id="iconImg0-2" class="iconImg" src="https://www.bellbanks.com/wp-content/uploads/2013/02/mobile-app-icon.jpg">
    <div id="num0-1" class="iconNumber">0/3</div>
    <div id="num0-2" class="iconNumber">2/3</div>
</div>

#container {
    width:200px;
    height:100px;
}
.iconImg {
    height:50px;
    width:50px;
    position:relative;
}
.iconNumber {
    position:absolute;
    background-color:rgba(180, 180, 180, 0.7);
    text-align:center;
}

var numIconNumber = $(".iconNumber").length;
for (var i = 0; i <= numIconNumber; i++) {
    var myId = $(".iconNumber:eq(" + i + ")").attr("id");
    var myIdNum = myId.replace("num", "");
    var myImg = $("#iconImg" + myIdNum);
    var myNum = $("#" + myId);
    myNum.css({
        width: myImg.width() + "px",
        left: myImg.offset().left + "px",
        top: (myImg.offset().top + myImg.height()) - myNum.height() / 2 + "px"
    });
}