html - CSS - 继承

Question

我将我的警告图片和文字设计成这样:

它看起来不错，但问题是我不知道右边的文本会有多长，所以我需要在文本和警告图标之间做一些继承，所以当文本较长时，警告会移动一个多一点到左边的网站。而不是在图像下方移动的文本。

我需要:使警示图片和文字继承，不依赖于文字的长短

我的 CSS:

.warningimg{
    background-image: url("images/warning.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 37px;
    height: 35px;
    margin-top: 56px;
    margin-left: 750px;
    margin-right: 1px;
}                
a .warning{
    color: #d4d4d4;
    height:35px;
    display: inline-block;
    text-align: right;
    float:right;
    margin-top: 30px;
    margin-right: 0px;
    text-decoration:none;
    margin-top: 65px; 
}

我的 HTML:

<div class="center">
    <div class="warningimg"></div>
    <a href="#"><span class="warning"><span class="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</span></a>
</div>

可以在以下位置找到实时预览: http://funedit.com/andurit/try5/

Answer 1

您可以在下面使用，而不是在警告文本之前插入带有图像背景的 div

.warning:before {  
    content: " ";  
    background: url("images/warning.png");  
    height: 37px;  
    width: 35px;  
}  

这样文本将始终显示在您的警告范围之前。