在我正在维护的应用程序中，我对 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();
}
我试过了
- 为 C div指定值为 0 的
topandleft属性， - 在类
float: left的媒体查询中指定rt-side-pnl
...但它给我留下了这样的布局：
*---*-----*
| A | |
*---| B |
| |
*---*-----*
| C |
*---*
问题：我缺少什么来实现 A 和 C 相互重叠、B 靠边的 2 列布局？我觉得解决方案就在我的眼皮底下，但我只是没有看到它。如果可能，我必须保留标记的结构；如果我必须稍微重新订购东西，那也可以。