在Div的左上角添加数字

Question

我想在我的div的左上角添加一个数字，但是到目前为止我所尝试的都没有正常工作。

以下是我目前的情况：

temporaries (and subobjects thereof)

这就是我想要的：

以下是代码：

74: 05/30/2018
75: 8:00 am to 5:00 pm
76: 41.313000
77: -105.576195
78: 1513 Fraternity Row

The current date is: 2018-06-08 15:32:22 +0000

The file date is: Optional(2018-06-08 06:00:00 +0000)

#Office365, #OneDrive {
	  height: 100px;
	  width: 16.259%;
	  display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    background-color: #F2F2F2;
}

Answer 1

他，解决方案是使用数字的绝对位置。 请注意，包含带有数字的标记的块将需要相对定位，以使数字对于该块是绝对的。这是一个示例代码

 #Office365,#OneDrive{
    display: inline-block;
    margin-right: 2px;
    background-color: #F2F2F2;

    position:relative;
    border:1px solid black;
    padding: 0 50px;
    text-align: center;
    }

    #Office365 img,#OneDrive img{
    width:100px;
    height: auto;
    }

    .num{
    position: absolute;
    top: 5px;
    left: 5px;
    }

 <div class="row" id="firstAppRow">
        <div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
        <div><img src="https://png.icons8.com/color/1600/office-365.png" height="50px" width="50px" />
        <p>Office365</p>
          <span class="num">1</span>
        </div>
        </div>
        <div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
        <div><img src="https://bcpsodl.pbworks.com/f/1477585037/onedrive.png" height="40px" width="40px" />
        <p>OneDrive</p>
          <span class="num">2</span>
        </div>
    </div>
</div>

Answer 2

尝试分配

position: relative; 

到＃Office365和#OneDrive。还将图像放在这些div中。

然后分配

position: absolute;
left: 1px;
top: 1px;

到＃Office365 span和#OneDrive span。

Answer 3

绝对vs浮动

＆＃13;

＆＃13;

.a {
  width: 200px;
  position: relative;
  border: 1px solid gray;
  margin-right:20px;
  display:inline-block;
  vertical-align:top;
}

.viaAbsolute {
  position: absolute;
  top:0;
  left: 0;
  padding: 3px;
  border: 1px solid red;
}

.viaFloat {
  float: left;
  padding: 3px;
  border: 1px solid red;
}

＆＃13;

<div class="a">
  <span class="viaAbsolute">
    1
  </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>

<div class="a">
  <span class="viaFloat">
    1
  </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>

＆＃13;

＆＃13;

＆＃13;