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%;} 這似乎是，你在找什麼。對！？