居中右浮动 Div Window 调整大小

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;
}

它们向右浮动，这样我就可以在较小的浏览器 windows 中将右侧 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 到 class (.my-div) 之间的通用规则（大部分内容），具体到 ids (#右上，和#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 Window 调整大小

Center Right-Floated Div on Window Resize

html

css

responsive-design

css-float