0

HTML

<div class="right-details">
    <div class="right-details-row">
        <b>Left title</b>
    </div>            
    <div class="right-details-row">
        <div class="right-details-row-l">K</div>
        <div class="right-details-row-r">Laass</div>                  
    </div>                                                            
</div>  
<div class="details-divider"></div>
<div class="left-details">
    <div class="left-details-row">
        <b>Right Title</b>
    </div>               
    <div class="left-details-row">
        <div class="left-details-row-l">Option 1</div>
        <div class="left-details-row-r">Chosen 1</div>
    </div>
    <div class="left-details-row">
        <div class="left-details-row-l">Option 2</div>
        <div class="left-details-row-r">Chosen 2</div>
    </div>
    <div class="left-details-row">
        <div class="left-details-row-l">Option 2</div>
        <div class="left-details-row-r">Chosen 2</div>
    </div>             
</div>


CSS

.left-details{
   display:table-cell;
   border: 1px solid #000000;
   border-radius: 4px;
   width:237px;
}
.details-divider{
    width:20px;
    display:table-cell;
}
.right-details{
   margin-left: 20px;
   display:table-cell;
   border: 1px solid #000000;
   border-radius: 4px;  
   width:350px;
}
.left-details-row{
   width: 232px;
   float:left;
   margin: 0 0 5px 4px;
}
.left-details-row-l{
   width:110px;
   float:left;
   overflow:hidden;   
}
.left-details-row-r{
   width:122px;
   float:left;
   overflow:hidden;
}
.right-details-row{
   width: 345px;
   float:left;
   margin: 0 0 5px 4px;
}
.right-details-row-l{
   width: 35px;
   float:left;
   margin: 0 0 2px 4px;
}
.right-details-row-r{
   width: 296px;
   float:left;
   overflow:hidden;   
}

正如您在jsfiddle中看到的，左侧Div文本位于底部，如何将其移至顶部？

4

3 回答 3

2

添加vertical-align:top到您的.right-details规则：

.right-details {
    margin-left: 20px;
    display:table-cell;
    border: 1px solid #000000;
    border-radius: 4px;
    width:350px;
    vertical-align:top;
}

jFiddle 示例

于 2013-06-19T15:08:23.090 回答
0

添加

vertical-align: top;

到 .right-details

于 2013-06-19T15:08:16.840 回答
0 
.left-details{
   display:table-cell;
   border: 1px solid #000000;
   border-radius: 4px;
   width:237px;
   vertical-align: top;
}

注意最后一个属性

http://jsfiddle.net/V5JtR/1/

于 2013-06-19T15:08:20.577 回答