html - 3 列布局到 2 列布局，标记更改最少

Question

在我维护的一个应用程序中，我对 iPad 外形规范实现的(样式语言)更改较少。我已经设置了媒体查询来处理这个问题，但我在让我的标记正常运行方面遇到了一个小问题!

目前，在我们的“正常”外形中，我们有一个 3 列布局:

*---*-----*---*
| A |  B  | C |
*---*-----*---*

<div class="lft-side-panel">
    A
</div>

<div class="ctr-panel">
    B
</div>

<div class="rt-side-panel">
    C
</div>

.lft-side-panel {
    .span4();   // 4/16 slots wide
    margin-left: 0;
    left: 0;
}

.ctr-panel {
    .span8();
}

.rt-panel {
    .span4();
}

但是，由于这些较小外形的尺寸限制，我正在尝试这样的 2 列设置:

*---*---------*
| A |         |
*---*    B    |
| C |         |
*---*---------*

<div class="lft-side-panel">
    A
</div>

<div class="ctr-panel">
    B
</div>

<div class="rt-side-panel">
    C
</div>

/* These appear to be where the solution lies, at least as far as Less is concerned. */
.lft-side-panel,
.rt-side-panel {
    left: 0;
    margin-left: 0;
    .span4();
}

.ctr-panel {
    span12();
}

我试过了

1. 为 C div 指定值为 0 的 top 和 left 属性，
2. 在 rt-side-pnl 类的媒体查询中指定 float: left

...但它给我留下了这样的布局:

*---*-----*
| A |     |
*---|  B  |
    |     |
*---*-----*
| C |
*---*

问题:要实现 A 和 C 彼此重叠、B 位于一侧的 2 列布局，我缺少什么？我感觉解决方案就在我眼皮底下，但我只是没有看到它。如果可能，我必须保留标记的结构；如果我必须稍微重新排序，那也可以。

Answer 1

看看这个 fiddle http://jsfiddle.net/s756e/3/
我设置了 .rt-side-panel, .lft-side-panel { float:left; width=25%;(需要将 16 个 bootstrap 中的 4 个转换为百分比并添加一些演示颜色和高度)并设置 .ctr-panel {float:right;宽度=75%；这似乎就是您要找的东西。对吧!？