HTML、CSS 文本漂浮在 DIV 中

Question

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文本在底部,如何将它移到顶部？

Answer 1

将 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 example