问题越来越格“右”

我得到了以下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 ）区域应该对齐到右边。我在这里做错了什么？

current design

来源

2014-01-26 Ole Albers

这么多的花车......你真的不应该用花车来代替文本对齐。但这里是修复：

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

见这里：http://jsfiddle.net/eS7LL/

来源

2014-01-26 13:18:32 Shomz

天哪。那很简单。谢谢！ –

没问题，不要忘记使用浮动框来定位文本，并且文本对齐用于文本对齐。 – Shomz

问题越来越格“右”

回答

相关问题