带有侧菜单的基础CSS顺序

cld4siwp 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(103)

我正在使用Foundation，我想在小型设备上创建这个网格：

并使其在桌面上看起来像这样：

你可以看到“操作”和“侧信息”现在在侧导航中。
这就是我目前所知道的：

.actions { background-color: #00FFF7; height: 5rem !important; padding: .5rem; }
.about { background-color: #F0A202; height: 10rem !important; padding: .5rem; }
.side { background-color: #00FFF7; height: 7rem !important; padding: .5rem; }
.copyright { background-color: #F0A202; height: 12rem !important; padding: .5rem; }

@media only screen and (min-width: 640px) {
  .actions {
    order: 3;
  }

  .about {
    order: 1;
  }

  .side {
    order: 4;
  }

  .copyright {
    order: 2;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" />

<div class="grid-container padding-top-1">
  <div class="grid-x grid-margin-x grid-margin-y align-top">
    <div class="cell small-12 medium-4 large-3 float-left actions">
      <h1>Actions</h1>
    </div>

    <div class="cell small-12 medium-8 large-9 float-right about">
      <h1>About this item</h1>
    </div>

    <div class="cell small-12 medium-4 large-3 float-left side">
      <h1>Sideinfo</h1>
    </div>

    <div class="cell small-12 medium-8 large-9 float-right copyright">
      <h1>Copyright</h1>
    </div>
  </div>
</div>

你也可以在这里看到：https://codepen.io/DoctorRobot/pen/WNMJOMq
您可以看到order看起来不是正确的解决方案。我尝试使用float-right和float-left，但它看起来不符合我想要的。有什么想法和建议吗？

css

来源：https://stackoverflow.com/questions/72462469/foundation-css-order-with-side-menu

1条答案

按热度按时间

eaf3rand1#

order仅适用于更改移动的设备顺序时的布局。无论如何，我都不是Foundation Flexbox Utilities方面的Maven，但这对您来说应该很好。我基本上把div分成两组，分别放在它们各自的.cell .small-12 etc下。我还删除了float的，因为他们不工作的flex伟大。
我使用您现有的媒体查询来获得您想要的桌面和移动的上的margin。我不确定是否有一种方法可以使用foundation指定margin或gap，但如果可以的话，我会使用它们。

.actions {
  background-color: #00FFF7;
  height: 5rem !important;
  padding: .5rem;
}

.about {
  background-color: #F0A202;
  height: 10rem !important;
  padding: .5rem;
}

.side {
  background-color: #F18805;
  height: 7rem !important;
  padding: .5rem;
}

.copyright {
  background-color: #D95D39;
  height: 12rem !important;
  padding: .5rem;
}

@media only screen and (max-width: 600px) {
  .about,
  .actions,
  .copyright,
  .side {
    margin-bottom: 1rem;
  }
  .actions {
    order: 1;
  }
  .about {
    order: 2;
  }
  .side {
    order: 3;
  }
  .copyright {
    order: 4;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" />

<div class="grid-container padding-top-1">
  <div class="grid-x grid-margin-x grid-margin-y align-top">
    <div class="cell small-12 medium-8 large-9 about">
      <h1>About this item</h1>
    </div>
    <div class="cell small-12 medium-4 large-3 actions">
      <h1>Actions</h1>
    </div>
    <div class="cell small-12 medium-8 large-9 copyright">
      <h1>Copyright</h1>
    </div>
    <div class="cell small-12 medium-4 large-3 side">
      <h1>Sideinfo</h1>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

带有侧菜单的基础CSS顺序

1条答案

相关问题

热门标签

最新问答