html - 使元素在媒体屏幕上对齐已更改

Question

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

JSFIdle

当两个 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;   
}

这是更新的 jsFiddle。

希望能帮助到你！！干杯。

Answer 2

而不是在屏幕顶部显示时使用position:relativetry float:lefton 。.dhFieldset

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

此外，如果您不希望它们低于其他 - 您将需要设置min-width为.dhButtonToolbar. 就像在这里完成的那样 或者您可以将 dhFieldset 的宽度更改为百分比宽度。