1

我的网站有一个导航结构，类似于 Office 2007-2013 功能区，在标记中看起来像这样。

这是每个“选项卡”的内容（每个选项卡都包含在另一个<ul>代表每个顶级选项卡及其内容的选项卡中。选项卡可见性由 javascript 控制）。

<ul> <!-- this UL represents the tab content -->
    <li> <!-- this LI represents the "button group" -->
         <p>Paragraph</p>
         <ul>
             <li><a href="#"><span>Foo</span></a></li>
             <li><a href="#"><span>Bar</span></a></li>
             <li><a href="#"><span>Baz</span></a></li>
         </ul>
    </li>
    <li> <!-- this LI represents the "button group" -->
         <p>Styles</p>
         <ul>
             <li><a href="#"><span>Foo</span></a></li>
             <li><a href="#"><span>Bar</span></a></li>
             <li><a href="#"><span>Baz</span></a></li>
         </ul>
    </li>
</ul>

每个<p>按钮组中的 绝对定位到每个按钮组的底部中心，<ul>定义了自己的高度。

目前，所有最里面的<li><a>元素都水平排列在一行中（作为大块按钮），或者垂直排列，<li>每个元素最多三个元素<ul>作为纯文本小按钮。

这是我到目前为止所拥有的 jsFiddle，仅显示粗大的按钮：

http://jsfiddle.net/ahG7K/2/

但我想要一个看起来像这样的组合方法：

两个盒子水平排列，另外两个垂直排列

但是我一直在寻找一种完全不修改 HTML 并避免绝对定位的好方法来实现这一点（因为担心会因不同的字体大小或其他细节造成破坏，而且感觉不纯）。

4

1 回答 1

2

使用纯 CSS 有两种方法可以解决这个问题。这两种方法都不适用于 IE<10。

第一个非常简单，并且具有很好的浏览器支持（尽管 Firefox 缺少对一些相关属性的支持，例如 break-before 和 column-span）：

http://cssdeck.com/labs/q7sc2mcc

ul {
  columns: 3;
}

可能需要前缀： http ://caniuse.com/#feat=multicolumn

第二种方法需要更多的 CSS 才能完成，并且您必须指定一个高度，但是您将对结果有更多的控制权。支持仅限于支持从 Flexbox 模块包装的浏览器（目前只有 Opera、Chrome 和 IE10 支持）。

http://codepen.io/cimmanon/pen/pldLa

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 10em;
}

li {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

浮动也可以用于此目的，但您必须提前知道宽度。要强制最后一个出现在倒数第二个下方，请使用以下公式： [width of parent] / [num of elements - 1]

http://cssdeck.com/labs/aksfizam（4个元素）

li {
  float: left;
  width: 33%;
}
于 2013-06-29T11:35:07.580 回答