CSS尝试使用媒体查询更改第n个子项()div的顺序

pbpqsu0x 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(129)

我正在尝试在网页上创建居中的导航栏。导航栏由5个div组成，当屏幕低于600px时，我希望第三个div成为第一个div
这是我的HTML

<div class="mainmenu">
            <div class="nav">Skills</div>
            <div class="nav">Formation</div>
            <div class="nav titre">John Doe</div>
            <div class="nav">Project</div>
            <div class="nav cta">Call me</div>
    </div>

和我的CSS

.mainmenu {
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;
    height: 60vh;
    text-align: center; 
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    font-size: 17px;

}

.nav {
    width: 10%;
    margin: 17px;
    font-size: 20px;
}

.mainmenu .titre{
    font-size: bolder;
    font-size: 30px;
}

.cta {
    border-radius: 15px;
    padding: 18px;
    white-space: nowrap;
}

@media screen and (max-width:768px) {

}
.mainmenu:nth-child(3){
    order: 1;
}

John Doe在768px以下时不是第一个，而是一直最后一个，媒体查询不会改变我的VS代码预览上的任何内容，在Chrome上也不会，我尝试改变最大宽度，我尝试反转主菜单的弯曲方向，但John Doe一直是最后一个。这里有点新，所以任何提示，也可以帮助我问更好的问题，欢迎
谢谢你帮我读

css

来源：https://stackoverflow.com/questions/75765916/css-trying-to-change-order-of-nth-child-div-with-media-query

4条答案

按热度按时间

uoifb46i1#

使用order: -1;代替order: 1;
并将.mainmenu:nth-child(3)替换为.mainmenu .nav:nth-child(3)

.mainmenu .nav:nth-child(3){
    order: -1;
}

演示

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-20

olhwl3o22#

要使第三个div首先出现在低于600px的屏幕上，您应该在媒体查询中使用order属性，如下所示....

.mainmenu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
  }

  .titre {
    order: -1;
  }

  .nav {
    width: 100%;
    margin: 10px 0;
  }

添加这个代码内你的媒体查询& try.
希望这能有所帮助.....

赞(0）回复(0）举报 2023-03-20

j7dteeu83#

[Be小心你在媒体提问时的言辞。
这个代码段在视区较窄时将所有导航项置于第2级，然后为mainmenu的第3个子菜单（mainmenu的第3个子菜单，而不是作为第3个子菜单的mainmenu）覆盖此命令。

.mainmenu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 60vh;
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
}

.nav {
  width: 10%;
  margin: 17px;
  font-size: 20px;
}

.mainmenu .titre {
  font-size: bolder;
  font-size: 30px;
}

.cta {
  border-radius: 15px;
  padding: 18px;
  white-space: nowrap;
}

@media screen and (max-width:768px) {
  .mainmenu .nav {
    order: 2;
  }
  .mainmenu .nav:nth-child(3) {
    order: 1;
  }
}

<div class="mainmenu">
  <div class="nav">Skills</div>
  <div class="nav">Formation</div>
  <div class="nav titre">John Doe</div>
  <div class="nav">Project</div>
  <div class="nav cta">Call me</div>
</div>

赞(0）回复(0）举报 2023-03-20

of1yzvn44#

成功了，谢谢你们的帮助！

赞(0）回复(0）举报 2023-03-20