Html CSS-具有多个文本的简单框

我试图做到这一点：

但实际情况是这样的：

.box{
    display: block;
    background-color:#ff935f;
    color: white;
    font-size: 350%;
    text-decoration: none;
    width: 290px;
    height: 150px;
    display: inline-block;
    margin-top: 10px;
    margin-right: 20px;
}

.box:hover{
    background-color:#ff6600;
}
.box img{
    display: inline-block;
    margin-top: 10px;
    margin-left: 70px;
}
.box span{
    display: inline;
    font-size: 13px;
}

问题是，我不知道如何在不使用大量的

div

s的情况下更改两个不同文本（在span和不在span中）的大小和位置

我试过这样的方法：

.box{
    display: block;
    background-color:#ff935f;
    color: white;
    font-size: 350%;
    text-decoration: none;
    width: 290px;
    height: 150px;
    display: inline-block;
    margin-top: 10px;
    margin-right: 20px;
}

.box:hover{
    background-color:#ff6600;
}
.box img{
    display: inline-block;
    margin-top: 10px;
    margin-left: 70px;
}
.box span{
    display: inline;
    font-size: 13px;
}

HTML:

---

非常感谢您提供的任何帮助，

您可以使用psuedo元素来实现此目的：

HTML

---

您应该使用Divs而不是p标记。P标签应该用于文本，而不是容器。请注意，我不知道该框是否应该是链接，但您可以使用a href的badge类更改第一个div，这一点您就知道了

看看我是如何在主容器div中添加两个div的。这样可以更容易地重新组合内容。您希望将图像和数字重新组合到同一容器中，并将子文本放在其自己的容器中

这是你的电话号码

Html:

<a data-label='some label text' data-count='22'>        
   <img width="68" height="67" title="" alt="" src="yourImage.jpg" />     
</a>

a {
    background-color:#ff935f;
    color: white;
    font-size: 350%;
    width: 290px;
    height: 150px;
    line-height: 150px;
    display: inline-block;
    margin-top: 10px;
    margin-right: 20px;
    text-align:center;
    position:relative;
    font-family:verdana;
}
a:before {
    content:attr(data-count);
    position:absolute;
    right:15px;
}
a:after {
    content:attr(data-label);
    position:absolute;
    bottom:-50px;
    font-size:15px;
    display:block;
    width:100%;
}
a:hover {
    background-color:#ff6600;
    cursor:pointer;
}

<div class="badge">
    <div class="upper-container">
        <img class="compass" src="https://cdn1.iconfinder.com/data/icons/ios7-line/100/Compass.png" alt="" />
        <h1>22</h1>
    </div>
    <div class="lower-container">
        <p>Popisny text</p>
    </div>
</div>

.badge {
    background:#ff6600;
    width:292px;
    height:150px;
    position:relative;
}

.upper-container, .lower-container {
    display:block;
    width:100%;
}

.upper-container {
    height:100px;
}

.upper-container h1, .upper-container img {
    display:inline-block;
}

.compass {
    margin-left:103.5px;
    margin-top: 8px;
    width: 85px;
}

.upper-container h1 {
    margin-left: 24px;
    position: relative;
    top: -25px;
    color:#FFF;
    font-size: 50px;
    font-family: arial, sans-serif;
}

.lower-container {
    text-align:center;
}

.lower-container p {
    color:#FFF;
    font-family: arial, sans-serif;
    font-size: 20px;
    margin: 0;
    margin-top: 10px;
}