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

我试过

为C div指定top和left属性值为0，
在float: left类

rt-side-pnl

...但它给我留下了如下布局：

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

问题：我想要实现2列布局，A和C在彼此之上，而B在旁边是什么？我有一种感觉，解决方案就在我的鼻子底下，但我只是没有看到它。如果可能的话，我必须保留标记的结构;如果我必须稍微重新订购，那也可以。

Answer 1

查看这个小提琴http://jsfiddle.net/s756e/3/
我设置.rt-side-panel, .lft-side-panel { float:left; width=25%;}（需要将16个引导程序中的4个转换为百分比并添加一些演示颜色和高度）并设置.ctr-panel {float:right; width=75%;} 这似乎是，你在寻找什么。没错！？

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

1 个答案: