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(); 
} 

然而，由于这些小的外形尺寸大小的限制，我想了两栏设置作为这样的：

*---*---------* 
| 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. 指定top和left attribut Ë与C DIV值0，
2. 在媒体查询指定float: left为rt-side-pnl类

...但它给我留下了类似的布局：

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

问题：我错过了什么，实现了一个两列布局，A和C在彼此之上，而B在一旁？我有一种感觉，解决方案就在我的鼻子下，但我只是没有看到它。如果可能的话，我必须保留标记的结构;如果我必须稍微重新排序，那也可以起作用。

Answer 1

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