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

您可以使用@media查询进行响应式布局。

例如：

@media (max-width: 769px){
    #right-top,#left-top{
        float: none;/*unset the floated div*/
    }
}

demo

Answer 2

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

<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

中心右侧浮动Div窗口调整大小

2 个答案: