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

我有两列：.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;
  }
}

最佳答案

确保您的div顺序正确（组左上方）

<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

关于css - 在没有绝对定位的情况下在左上方显示右列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20578560/