0

我目前正在使用带有 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

4

1 回答 1

0

这会是你要找的吗？

jsFiddle：演示

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

这就是我理解你试图解决你的问题的原因，如果这对你有用，请告诉我。

于 2013-07-25T05:38:54.663 回答