在左上方显示右列，不显示绝对位置

Question

我有两列：.group left和.group right。在mobile上，我希望右列显示在左上方。下面的代码在移动设备上显示左下方的右列。右栏的高度是可变的，所以我不认为我可以使用绝对定位。有没有其他方法可以用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顺序正确（顶部左侧分组）

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

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

@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