Question

中等以上我有4列的行。对于小我有2行2列。

<div class="row">
    <div class="small-6 medium-3 columns">Grape</br>These are either white or red</div>
    <div class="small-6 medium-3 columns">Pear</div>
    <div class="small-6 medium-3 columns">Apple</div>
    <div class="small-6 medium-3 columns">Plum</div>
</div>

我遇到的问题是，对于小尺寸，当文本很长并且转到新行时，列不能正确堆叠，左边有一列，右边有三列。

有修复吗？

Answer 1

http://jsfiddle.net/swnpkcLu/
你可能会有专门的类名和媒体查询的sass mixin（我对基础不是那么熟悉） - 但是css很有用。

.small-6 {
    border: 1px solid #fff;
    background: #ddd;
}
.small-6:nth-child(2n+1) {
    clear: both;
}
@media only screen and (min-width:40.063em) {
    .small-6:nth-child(2n+1) {
        clear: none;
    }
}

对于IE8支持，但您需要额外的类名而不是：nth-child selector

小的列/行问题

1 个答案: