0

我有这个用于桌面版的 CSS：

div.bottomnav_table_left {
  width: 50%;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  display: table-cell;
}
div.bottomnav_table_spacer {
  width: 10px;
  display: table-cell;
}
div.bottomnav_table_right {
  width: 50%;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  display: table-cell;
}

这个 CSS 用于小窗口版本：

  @media screen and (max-width: 700px) {
  div.bottomnav_table_left {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    float: left;
  }
  div.bottomnav_table_spacer {
    display: none;
    width: 0px;
    height: 0px;
  }
  div.bottomnav_table_right {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    float: left;
  }
  }

（我已经尝试将 CSS 代码示例限制在核心范围内。我希望没问题。）

在 IE、Opera、Chrome 和 FireFox 上，我可以上下调整窗口大小并且效果很好。但是，在 Safari 上，它可以在初始大小上工作，但调整浏览器窗口的大小只能工作一次。

如果您重新调整 Safari 的大小（例如从桌面小到小），它将不再起作用。它不会将 DIV 放在彼此的顶部，而是将它们水平地彼此相邻放置。

4

0 回答 0