內容列不對齊正確

我有以下設置：http://jsfiddle.net/eGjPa/5/內容列不對齊正確

爲什麼在右列文本本身較低每次我在左列中添加一個新行時間？我需要該行從列的頂部開始。

<div class="container"> 
    <form class="form-large"> 
     <div class="left-col">line1<br />line2<br />line3</div> 
     <div class="right-col">this line should be at the top of this column</div> 
    </form> 
</div>

.form-large { 
    max-width: 1000px; 
    padding: 14px 14px 14px; 
    margin: 0 auto 20px; 
    background-color: #fff; 
    border: 1px solid #d6d6d6; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
    box-shadow: 0 1px 2px rgba(0,0,0,.05); 
} 
.left-col { 
    display: inline-block; 
    width: 640px; 
    padding-left: 11px;  
} 
.right-col { 
    display: inline-block; 
    width: 300px; 
    width: 300px; 
    padding-left: 14px; 
    /*border-left: 1px solid #d6d6d6;*/ 
}

來源

2013-02-12 ShadyPotato

添加vertical-align: top;到您的右列的CSS。

OT：你的寬度設置了2次。

來源

2013-02-12 22:28:00

這樣做。還有一件事，我在兩列之間添加了一個垂直分隔符，但它只擴展到右列內容結束的位置[http://i.imgur.com/z0PQd8t.png](http://i。這裏是代碼：[http://jsfiddle.net/eGjPa/8/](http://jsfiddle.net/eGjPa/8/）我該如何做到這一點？擴展到表單的底部？ – ShadyPotato 2013-02-12 22:30:10

在左欄放置一個「右邊界」，在右邊欄放置一個「邊界左邊界」，然後使用負餘量將兩個邊框疊放在一起（'.right-col {margin-left： -1px;}'可能會這樣做）。 – thirdender 2013-02-12 22:33:20

如果您不介意在頁面底部添加右列，請添加寬度：100％;到你的右欄。 – 2013-02-12 22:33:45

將float: right添加到您的右列，並且您可能需要增加jsfiddle窗口的寬度。

來源

2013-02-12 22:28:58 dezman

內容列不對齊正確

回答

相關問題