对齐包含在两列中的各种长度的 div答案

【问题标题】：Aligning divs of various lengths that are contained in two columns对齐包含在两列中的各种长度的 div
【发布时间】：2013-07-24 18:58:18
【问题描述】：

我目前正在使用带有 Bootstraps 响应式布局的 HTML 和 CSS 为餐厅制作菜单

http://jsfiddle.net/TAq7f/

  <div class=span12 block> 
   <div class="span6 menu-column">
       <div class="menu-item">12.   </div>
       <div class="menu-item">13.   </div>
          .....
    </div>
    <div class="span6 menu-column">
       <div class="menu-item">15.   </div>
       <div class="menu-item">16.   </div>
    </div>
 </div>

这是代码，但由于某种原因它没有格式化，我会快速分解它。菜单中有两列，左侧编号为 12-14，右侧编号为 15 和 16。这是一种响应式布局，因此在移动时左侧列将堆叠在右侧顶部，为我提供了一个不错的 12-16 列表。我为每个菜单项使用了 div，但是有些有 5 行描述，而另一些有 2 个。我希望每个 div 之间的间距保持一致，并且 # 的 12 和 15 对齐，还有 13 和 16。我目前的尝试是设置长度但是 div 元素看起来有点尴尬。有什么建议吗？

http://tinypic.com/r/htwxs6/5

【问题讨论】：

您没有使用 span6 上的 .row-fluid 类，您嵌套在 span12 内...我正在玩弄小提琴，稍后会更新.
我测试了该代码，但没有太大变化，请查看我的图像更新，让我知道这是否是您要解决的问题。
好吧，我试图解决我理解你的问题是......我想如果你添加一个你想要完成的视觉表示，我可以和你在同一页面上提供帮助你解决它。
除非您 a) 使用 <table> 而不是 div b) 为您的所有 div 设置相同的高度，否则您将无法将它们全部与另一列上的对齐知道大于任何描述或c）使用边距手动定位它们
@koala_dev 所以要将其切换到一个表格，我必须每个数字使用一个表格，其中包含 2 个元素，一个用于标题，另一个用于描述？我如何确保它们都排成一行并且等距，这基本上会导致我遇到与 div 相同的问题？

标签： twitter-bootstrap responsive-design alignment multiple-columns

【解决方案1】：

这就是你要找的吗？

jsFiddle: Demo

请注意，我添加了 .row-fluid 和 .container-fluid 类到一些 <div> 元素，以使跨度按应有的方式工作。我还修改了您在 CSS 中为.menu-item 设置的height 和min-height。

据我了解，您正在尝试解决您的问题，如果这对您有用，请告诉我。

【讨论】：

我将.well 类添加到每个<div class="menu-item"> 中只是为了说明目的，这样您就可以看到事物是如何响应堆叠和排列的。