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处于正确的顺序（组在左上方）

<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

在左上方显示右列而没有绝对定位

1 个答案: