Question

我有一个响应式布局，应该在小屏幕上看起来像这样：

|A1             A2|
|B1             B2|

并在更广泛的屏幕上显示：

|        A1 A2 B2 B1        |

A2和B2细胞具有固定但未知的宽度。在小屏幕上，A1和B1单元格中的文本与左侧对齐，但在更宽的屏幕上，A1的文本与右侧对齐。

我使用Bootstrap管理A和B行，但我不能将它用于A2和B2单元格，因为我不希望它们改变大小。我不能使用硬编码的边距，因为我不知道这些单元格的宽度。

这是我到目前为止所提供的内容（以fiddle提供）：

HTML：

<div class="row">
    <div class="col-sm-6 left">
        <div class="big-cell">A1</div>
        <div class="small-cell">A2</div>
    </div>
    <div class="col-sm-6 right">
        <div class="big-cell">B1</div>
        <div class="small-cell">B2</div>
    </div>
</div>

CSS：

.small-cell {
    background-color: #ddffff;
    display: inline-block;
    text-align: center;
    width: 100px; /* Value used as an example */
}
.left .small-cell {
    float: right;
}
.right .small-cell {
    float: right;
}
.big-cell {
    background-color: #ddddff;
    display: inline-block;
}
@media screen and (min-width: 768px) {
    .small-cell {
        display:block;
    }
    .right .small-cell {
        float: left;
    }
}

看起来几乎没问题，除了我无法在更宽的屏幕上使A1单元格在A2旁边对齐。

Answer 1

接近这个的一种方法是重构html标记并将a2 div放在a1之前

<div class="small-cell ">A2</div>
<div class="big-cell">A1</div>

然后添加一个浮点数：右;当超过768px到a1 div时。

jsfiddle：http://jsfiddle.net/vLnzj9ue/2/

Answer 2

如果你可以将文本右对齐，那么只需将整个左列对齐就可以了。

.col-sm-6.left {
    text-align: right;
}

在响应式布局中重新组织div

2 个答案: