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 に答える