Question

当屏幕的x轴或y轴高于或小于另一个轴时，我有两个div改变它们的位置。您可以在JsFiddle示例中测试它。

当两个div的位置发生变化时，我的ButtonToolbar元素位置变得混乱。如何解决这个定位问题？

我尝试使用职位position:relative，但没有设法让它发挥作用。有任何想法吗？希望你能理解我的问题。

Answer 1

让我们希望我得到你的问题。在媒体查询中，您应该更改“dhFieldset”的显示方式。

所以它会是这样的：

正常位置：

.dhFieldset{
   color: white;
   font-size:6px;
   width: 27px;
   height:80px;
   background-color:green;

}

位于屏幕顶部：

@media screen and (max-aspect-ratio: 1/1) { 
.dhFieldset{
   color: white;
   font-size:6px;
   height: 27px;
   width:80px;
   margin-left:22px;
   float:left;   
}

这是Updated jsFiddle。

希望它有所帮助!! 欢呼声。

Answer 2

在屏幕顶部显示时，不要在position:relative上使用float:left尝试.dhFieldset。

@media screen and (max-aspect-ratio: 1/1) { 
    .dhFieldset{
      color: white; 
      height: 35px;
      width:80px;
      margin-left:22px;
      float:left;
}

此外，如果您不希望他们在其他人之下，则需要在min-width上设置.dhButtonToolbar。就像它完成here 或者，您可以将dhFieldset的宽度更改为百分比宽度。

更改媒体屏幕上的元素对齐

2 个答案: