响应式CSS：平板端两列布局无法正常对齐问题排查

你的问题出在float布局下的高度错位：平板端模式中，前两列内容高度不一致时，第三列会被第二列的高度“卡住”，无法移动到第二行最左侧，导致第二行两列无法对齐。

下面给你两种直接可行的修复方案：

方案一：针对现有float布局快速修复 #

在平板端的媒体查询规则里，给每一行的第一个列添加清除左侧浮动的规则，强制它换行到新行：

@media only screen and (min-width: 600px)
{
    /* 保留原有平板端宽度样式 */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    
    /* 新增：平板端下，每2列后的第一个列强制换行 */
    .col-s-6:nth-child(2n+1) {
        clear: left;
    }
}

不管前一列高度多高，第三、第五个列都会被强制换到新行，确保每行两列对齐。

方案二：改用Flexbox布局（更稳定推荐） #

float布局本身容易出现这类高度错位问题，改用Flexbox能彻底解决，同时代码更简洁：

修改CSS中的.row和列样式：

*
{
    box-sizing: border-box;
}

.row
{
    display: flex;
    flex-wrap: wrap; /* 允许自动换行 */
}

[class*="col-"]
{
    padding: 15px;
    /* 移除原有float: left; */
}

/* 保留原有媒体查询的宽度规则 */
/* For mobile phones: */
[class*="col-"]
{
    width: 100%;
}

@media only screen and (min-width: 600px)
{
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px)
{
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Flexbox会自动处理换行和对齐，不管列的高度如何，都能保持每行列对齐，同时完全符合你桌面端4列、平板端2列的布局需求。

内容的提问来源于stack exchange，提问作者Orca37