Question

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

  <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和15。 16.这是一个响应式布局，所以当移动给我一个漂亮的12-16列表时，左列将叠加在右上方。我为每个菜单项使用了div，但有些有5行描述，其他2.我想在每个div之间保持一致的间距，并且＃12和15对齐，还有13和16.我当前的尝试是设置长度为然而，div元素看起来有点尴尬。有什么建议吗？

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

Answer 1

这会是你想要的吗？

jsFiddle：Demo

注意我添加了.row-fluid，并将.container-fluid类添加到某些<div>元素中，以便使跨度按预期工作。我还修改了您在height的CSS中设置的min-height和.menu-item。

这就是我的理解，你正试图解决你的问题，让我知道这是否适合你。

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

1 个答案:

jsFiddle：Demo