Question

我是html和css的新手所以请耐心等待。我有一行有两列的bootstrap。我想垂直对齐左列中的div与右列中的div。我怎么能这样做？

具体来说，我希望左边有带文字的div，它们解释了右边的某些元素。例如，想象一下读书但在页面的左边缘有一些标注，用于定义与这些单词相邻的单词。

右栏中的内容是动态的。我知道某些div会出现，我只是不知道它们究竟在哪里垂直。

这是一个jsfiddle：http://jsfiddle.net/dylanlingelbach/C73ap/。它应该是我想要做的相当少的重复。在我的实际情况中，休息是html内容，我不知道它的大小。

我正在使用bootstrap 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;
}

更新我不想重新格式化我的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/

在引导列之间垂直对齐div

2 个答案: