HTML，CSS文本里面DIV浮動

HTMLHTML，CSS文本里面DIV浮動

<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文本是在底部，如何轉移到頂端？

來源

2013-06-19 Laz Karimov

添加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

來源

2013-06-19 15:08:23 j08691

添加

vertical-align: top;

到.right-細節

來源

2013-06-19 15:08:16 koningdavid

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

注意最後一個屬性

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

來源

2013-06-19 15:08:20 Edorka

HTML，CSS文本里面DIV浮動

回答

相關問題