Question

我想做到这一点：

http://funedit.com/imgedit/soubory/small_16129188181407418534.jpg

但它实际上看起来像这样：

http://funedit.com/imgedit/soubory/small_3290460671407418910.jpg?x

问题是，我不知道如何更改2个不同文本的大小和位置（跨度和无跨度），而不会在彼此内部使用大量的div

我尝试过这样的事情：

.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：

<p>
<a href="#" class="box"><img src="images/box_icon.png">22 <span>Popisny text</span></a>
<a href="#" class="box"><img src="images/box_icon.png">22</a>
<a href="#" class="box"><img src="images/box_icon.png">22</a>
</p>

非常感谢任何帮助，

Answer 1

你可以使用伪元素：

HTML

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

CSS

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;
}

Answer 2

您应该使用Divs，而不是使用P标签。 P标签应该用于文本而不是容器。请注意，我不知道该框是否被认为是一个链接，但你可以用A href的徽章类更改第一个div，只是你知道。

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

以下是JSFIDDLE

HTML：

<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>

的CSS：

.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;
}

CSS - 包含多个文本的简单框

2 个答案: