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

看看这个小提琴http://jsfiddle.net/s756e/3/
我设置了.rt-side-panel, .lft-side-panel { float:left; width=25%;}（需要将你的 4 of 16 bootstrap 转换为百分比并添加一些演示颜色和高度）并设置.ctr-panel {float:right; width=75%;} 这似乎是您正在寻找的东西。对吧！？