css - 在没有绝对定位的情况下在左上方显示右列

Question

我有两列:.group-left 和 .group-right。在移动设备上，我希望右列显示在左上方。下面的代码在移动设备上显示左下方的右列。右栏的高度是可变的，所以我不认为我可以使用绝对定位。有没有其他方法可以使用 CSS 实现此目的？

@media all and (min-width: 980px) {
  .node-type-new-donate-page .group-left {
    width: 47% !important;
    min-width:320px;
  }
  .node-type-new-donate-page .group-right {
    width: 48%;
    min-width:320px;
    float:right;
  }
}
@media all and (max-width: 979px) {
  .node-type-new-donate-page .group-left {
    width: 95%;
    min-width:300px;
  }
  .node-type-new-donate-page .group-right {
    width: 95%;
    min-width:300px;
  }
}

Answer 1

确保您的 div 的顺序正确(group-left 在上)

<div class="node-type-new-donate-page">
    <div class="group-left">go left</div>
    <div class="group-right">go right</div>
</div>

然后将 float:left 添加到 .group-left 为您的 min-width 980px;

@media all and (min-width: 980px) {
  .node-type-new-donate-page .group-left {
    width: 47% !important;
    min-width:320px;
    float:left;
  }
  .node-type-new-donate-page .group-right {
    width: 48%;
    min-width:320px;
    float:right;
  }
}
@media all and (max-width: 979px) {
  .node-type-new-donate-page .group-left {
    width: 95%;
    min-width:300px;
  }
  .node-type-new-donate-page .group-right {
    width: 95%;
    min-width:300px;
  }
}

根据您的布局，您可能需要在 .node-type-new-donate-page 上使用 clearfix