在引導列中垂直對齊div

Question

我是新來的HTML和CSS，所以在這裏忍受我。我有兩列的引導行。我想將左欄中的div與右欄中的div垂直對齊。我怎樣才能做到這一點？

具體而言，我想在左邊有文字說明右邊的某些元素的div。例如，想象一下閱讀一本書，但在頁面的左邊空白處有一些標註，用於定義與這些詞相鄰的單詞。

右列中的內容是動態的。我知道某些div會出現，我只是不知道它們在哪裏垂直。

這是一個jsfiddle：http://jsfiddle.net/dylanlingelbach/C73ap/。它應該是我想要做的事情的一個相當小的重複。在我的實際案例中，休息時間是我不知道大小的html內容。

我使用的是引導2.

我寧願如果可能做到這一點沒有的JavaScript。我相信我可以通過在右列中找到div的位置並動態調整左列中div的絕對位置來動態地實現它，但我覺得像純粹的CSS解決方案會更優雅。

HTML：

<div class="modal"> 
    <div class="modal-header"> 
    <button type="button" class="close cancel" aria-hidden="true">×</button> 
    <h2 id="invite-modal-label">Some text</h2> 
    </div> 
    <div class="modal-body"> 
    <div class="row-fluid"> 
     <div class="span3"> 
     <div class="one"> 
      Align with #anchor1 
     </div> 
     <div class="two"> 
      Align with #anchor2 
     </div> 
     </div> 
     <div class="span9 padded"> 
      Content 
      <br/><br/><br/><br/><br/><br/> 
      <div id="anchor1"> 
       #anchor1 
      </div> 
      <br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/> 
      <div id="anchor1"> 
       #anchor2 
      </div> 
      <br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/> 
      Text at the end 
     </div> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-success confirm">Send</button> 
    <button class="btn btn-danger cancel">Cancel</button> 
    </div> 
</div> 

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.modal { 
    width: 60%; 
    left: 5%; 
    margin: auto auto auto auto; 
} 

.one { 
    border:1px solid black; 
} 

.two { 
    border:1px solid black; 
} 

UPDATE： 我不想重新格式化我的HTML。右列中的內容單獨呈現。基本上這個數據顯示在幾個地方，而不是所有地方都有左列。我想讓我的代碼將右列的內容與其餘的標記分開。

Answer 1

對於每個項目要垂直對齊，他們需要在自己的行：

<div class="row-fluid"> 
    <div class="span6"></div> 
    <div class="span6">content content content content content content content content content content content content content content content content content content</div> 
</div> 
<div class="row-fluid"> 
    <div class="span6">Align with #anchor1</div> 
    <div class="span6">#anchor1</div> 
</div> 

Here is the correct jsfiddle

Answer 2

你或許應該返工你的HTML，支持更多的你正試圖格式實現。

我建議將每個錨標籤和它的內容分成它自己的行。

我所做的是每個部分分解成它自己的.fluid-row，就像這樣：

<div class="modal"> 
    <div class="modal-header"> 
     <button type="button" class="close cancel" aria-hidden="true">×</button> 
     <h2 id="invite-modal-label">Some text</h2> 
    </div> 
    <div class="modal-body"> 
     <div class="row-fluid"> 
      <div class="span3"> 
       <div class="one">Align with #anchor1</div> 
      </div> 
      <div class="span9 padded"> 
       Content for anchor 1 
       <br /><br /><br /><br /><br /><br /> 
      </div> 
     </div><!-- end .row-fluid --> 
     <div class="row-fluid"> 
      <div class="span3"> 
       <div class="two">Align with #anchor2</div> 
      </div> 
      <div class="span9 padded"> 
       Content for anchor 2 
       <br /><br /><br /><br /><br /><br /> 
      </div> 
     </div><!-- end .row-fluid -->   
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-success confirm">Send</button> 
     <button class="btn btn-danger cancel">Cancel</button> 
    </div> 
</div> 

你可以看到這這裏的結果：http://jsfiddle.net/C73ap/38/如果要垂直對齊的東西在左