让Div“正确”的问题

Question

我收到了以下HTML：

<div style="width:300px">
<div class="goals">
                    <div class="goalLeft">
                            <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">7' (ET)</span>
                            <span class="goalResult">1:0</span><span class="player">Goetze </span>
                    </div>
                    <div class="goalRight">
                            <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">9'</span>
                            <span class="goalResult">1:1</span><span class="player">Goetze </span>
                    </div><div class="goalRight">
                            <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">80'</span>
                            <span class="goalResult">1:2</span><span class="player">Goetze </span>
                    </div><div class="goalLeft">
                        <span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">123' (ET)</span>
                            <span class="goalResult">2:2</span><span class="player">Goetze </span>
                    </div>
                    </div>
            </div>

这个CSS：

.goalLeft 
    {
        clear:both; 
        float:left;
    }

    .goalRight
    {
        clear:both;
        float:right;
    }
    .goals 
    {
         margin-left: 1em;
         margin-right: 1em;
    }
    #NeuesVomSpocht div.arrow 
    { 
        background:transparent url(setup/images/arrows.png) no-repeat scroll 0px -16px; 
        width:16px; 
        height:16px; 
        display:block;
    }
    #NeuesVomSpocht div.up 
    { 
        background-position:0px 0px;
    }

    .goalImage
    {
        display:block; 
        background-color:red; 
        width:22px;          
    }
    .goalMin
    {
        width:65px;
        background-color: cyan;
    }
    .goalResult
    {
        display:block; 
        background-color:green;              
    }
    .goalLeft .goalImage
    {
        float:left;
    }
    .goalRight .goalImage 
    {
        float:right;
        margin-left:auto; margin-right:0px;
    }
    .goalLeft .goalResult 
    {
        float: left;
    }
    .goalRight .goalResult 
    {
        float: right;
        margin-left:auto; margin-right:0px;
    }
    .goalRight .player 
    {                
        float:right;
        margin-left:auto; margin-right:0px;
    }
    .goalRight .goalMin
    {                
        float:right;
        margin-left:auto; 
        margin-right:0px;
    }
    .goalLeft .goalMin
    {                
        float:left;
    }
    .goalImage img 
    {
       width: 20px;
       height: 20px;
       vertical-align: top;
    }

我想要的是右青色（9,80）区域中的文本应该与右边对齐。我在这里做错了什么？

Answer 1

这么多花车......你不应该真的使用花车代替text-align。但这是修复：

.goalRight .goalMin {  
    text-align: right;
}

请在此处查看：http://jsfiddle.net/eS7LL/