0

我有以下设置：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;*/
}
4

2 回答 2

2

添加vertical-align: top;到右侧列的 css 中。

OT：您设置了 2 次宽度。

于 2013-02-12T22:28:00.570 回答
0

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

于 2013-02-12T22:28:58.977 回答