让 Div “正确”的问题答案

【问题标题】：Problems getting Div "right"让 Div “正确”的问题
【发布时间】：2023-03-04 20:07:01
【问题描述】：

我得到了以下 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) 区域中的文本应向右对齐。我在这里做错了什么？

【问题讨论】：

标签： css html alignment text-alignment

【解决方案1】：

这么多浮点数...您不应该真正使用浮点数来替换文本对齐。但这里是修复：

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

在这里查看：http://jsfiddle.net/eS7LL/

【讨论】：

天哪。就这么简单。谢谢！
没问题，box定位别忘了用float，文字对齐用text-align。