格内容的表格单元格设置

Question

请从下面捣鼓什么，我试图

http://jsfiddle.net/9LdEc/

代码：

HTML：

<div id="CorpDealerSearch"> 
    <div class="row"> 
      <div class="left"> 
       Quarter To Date 
      </div> 
      <div class="left"> 
       <a href="self">914</a> 
      </div> 
      <div class="left"> 
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8BxPh6MWMQ86cY/pXO/0or0qcGh0OW3F8AAAAASUVORK5CYII="> 
      </div> 
      <div class="left"> 
       <span>OFF TIER2</span> 
      </div> 
     </div> 
     </div> 

CSS：

#CorpDealerSearch{ 
    display:table; 
    padding : 5px; 
    border: 2px solid gray; 
    border-radius:3px; 
} 
.row{ 
     display:table-row; 
} 

.left { 
    display:table-cell; 
    display:inline-block; 
    padding:5px; 
} 

但我想像下面的截图一样的设计。我如何修改小提琴来获得这样的设计？

我只需要对最后一个单元格进行更改。

Answer 1

我已经更新您的提琴： http://jsfiddle.net/9LdEc/4/

我增加了一些类你的HTML和使用下面的CSS：

body { 
    font-family: Arial; 
} 

#CorpDealerSearch { 
    display:table; 
    padding : 5px; 
    border: 2px solid gray; 
    border-radius:5px; 
    vertical-align: middle; 
    line-height: 25px; 
} 
#CorpDealerSearch a, 
#CorpDealerSearch a:hover, 
#CorpDealerSearch a:visited { 
    color: red; 
    font-weight: bold; 
} 

.row { 
    display:table-cell; 
    vertical-align: middle; 
} 
.left { 
    display:table-cell; 
    display:inline-block; 
    padding-left:5px; 
    padding-right: 5px; 
} 
.tier { 
    border-left: 2px dotted black; 
    background-color: lightgreen; 
} 

这是你想要的吗？