使用css在html中使用Div之前的Div

Question

我无法在图像之前显示div文本，这就是我想要的

但无法做到正确。

HTML

<div id="Header" class="header-first">
     <h2 class="sometext">Fruit</h2>

    <div id="number-of-fruits" style="display: inline; float: right;">0</div> <span>
        <img id="someImage" src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="someimage">
     </span>

</div>

CSS

.header-first {
    background-color: red;
    width: 100%;
    height:50px;
}
.sometext {
    display: inline-block;
    margin: 2px 4px;
    text-align: left!important;
    color: blue;
}
.someimage {
    float: right;
    vertical-align: middle;
    margin-top: 3px;
}

http://fiddle.jshell.net/WyPWs/1/

Answer 1

这是一个更新的小提琴：http://fiddle.jshell.net/WyPWs/4/

尝试将右侧内容包装在一个div中，然后单独处理您的项目。

    <div class="right-section">
        <span class="number">0</span>
        <img src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="my-image">
    </div> 

Answer 2

使用定位。在这种情况下，我使用了相对定位。

#number-of-fruits {
    position:relative;
    right:30px;
}

http://jsfiddle.net/WyPWs/10/