div内容表单元格设置

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;
}

这是你想要的吗？