窗口大小调整时右上浮动的Div

debugcn 发表于 Dev

詹姆斯·莱克斯尼斯（James Likeness）

在我的网站的台式机版本中，我要设置两个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。如何使它们集中在较小的浏览器上，而不是与右侧对齐？

阿古什

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

<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（430px）乘以每个div的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;
    }
}

你可以在这里测试

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。