html - 调整窗口大小时居中右浮动 Div

Question

我有 2 个 div，我将它们设置为在我网站的桌面版本中彼此相邻，而在移动/平板电脑版本中，我希望右侧的 div 位于顶部，左侧的 div 位于在下面，它们都在父 div 中居中。我是这样设置的:

<div id="right-top">right & top</div>
<div id="left-top">left & bottom</div>

我的 CSS 是这样的:

#right-top {
  position: relative;
  float:right;
  width: 430px;
  height: 300px;
  max-width: 100%;
  display: block;
  background-color: #ddd;
  margin: 0px auto;
}

#left-top {
  position: relative;
  float:right;
  width: 430px;
  height: 300px;
  max-width: 100%;
  display: block;
  background-color: #666;
  margin: 0px auto;
}

它们向右浮动，这样我就可以在较小的浏览器窗口中将正确的 div 置于顶部。如何让它们在较小的浏览器上居中，而不是与右侧对齐？

Answer 1

我会使用移动优先设计来做到这一点这意味着首先定义它在小型设备上的外观，然后逐步为更大的屏幕添加更多规则

<div class="my-div" id="right-top">right & top</div>
<div class="my-div" id="left-top">left & bottom</div>

因此我们将 2 个 div 之间的通用规则(大部分内容)定义为一个类 (.my-div)，id 的细节(#right-top 和 #left-top)并在 860px 设置断点(每个 div 为 430px 乘以 2)，然后才将 div 向右浮动。

.my-div{
  width: 430px;
  height: 300px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

#right-top {
  background-color: #ddd;
}

#left-top {
  background-color: #666;
}

@media only screen and (min-width: 860px) {
    .my-div{
        float: right;
    }
}

可以测试一下here