css 如何根据父元素的宽度自动将16个子HTML元素拆分为16 x1/8x 2/4x 4？

lsmd5eda 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(145)

我有一个导航栏，其中包含16个链接。
在桌面屏幕上，我希望有16个链接在一排。
当窗口变小，我希望16个链接分裂成两行都8个链接。
然后，当窗口宽度变得非常窄，我希望16个链接分成4x4网格。
我可以在CSS中做什么？目前我不得不硬编码父对象的宽度，这听起来很难在将来维护或更新。

div {padding:.5em;margin:1em;border: 1px solid #000}

div#test1 {width:550px}
nav a {width:60px; background:#ff0; text-align:center;padding:.5em}
nav {display:flex; gap:.5em; flex-wrap: wrap;justify-content:center}

div#test2 {width:500px}

div#test3 {width:400px}

div#test4 {width:680px}

<h3>This is NOT good:</h3>
<div id="test1">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>


<h3>This is NOT good:</h3>
<div id="test2">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>

<h3>This is good:</h3>
<div id="test3">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>

<h3>This is good:</h3>
<div id="test4">

<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

</div>

css

来源：https://stackoverflow.com/questions/76544629/how-can-i-split-a-16-children-html-elements-into-16x1-8x2-4x4-according-to-t

3条答案

按热度按时间

pbwdgjma1#

你说你希望它基于父宽度，所以媒体查询不会真正帮助你。你要么需要一个容器查询，要么使用下面的解决方案。
调整div大小以查看结果。我有一篇关于这个把戏的详细文章：https://css-tricks.com/responsive-layouts-fewer-media-queries/

nav {
  /* first breakpoint*/
  --w1:1200px;
  --n:16;
  /* second breakpoint*/
  --w2:800px;
  --m:8;
  /* third breakpoint*/
  --w3:400px;
  --p:4;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(clamp(  
            (100% - (var(--n) - 1)*.5em)/var(--n),
              (var(--w1) - 100%)*1000,
            100%/(var(--m) + 1)), 
              (var(--w2) - 100%)*1000,
            100%/(var(--p) + 1)), 
              (var(--w3) - 100%)*1000,
            100%), 1fr));
  gap: .5em;
}

div {padding:.5em;margin:1em;border: 1px solid #000;overflow: hidden; resize: horizontal;}

nav a {background:#ff0; text-align:center;padding:.5em}

<div>
 <nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
 </nav>
</div>

赞(0）回复(0）举报 2023-06-25

vxf3dgd42#

使用grid布局。我已经为max-width:500px和max-width:1200px添加了媒体查询，你可以为你的屏幕断点使用任何像素值，如果你愿意，还可以添加更多的媒体查询。repeat(4, 1fr)只是节省了写grid-template-rows: 1fr 1fr 1fr 1fr;的时间，所以不要被这一点所迷惑。查看此链接以了解有关网格布局的一些基础知识：https://www.w3schools.com/css/css_grid.asp

nav {
  padding: .5em;
  margin: 1em;
  border: 1px solid #000;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: .25rem;
}

nav a {
  width: 60px;
  background: #ff0;
  text-align: center;
  padding: .5em
}

/*for laptop/medium-desktop */
@media screen and (max-width:1200px) {
  nav {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
/* 0- 500px screen-size for mobile/tablet */
@media screen and (max-width:500px) {
  nav {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}

<h3>Navbbar :</h3>
<nav>
  <a>br3f</a>
  <a>dfee</a>
  <a>xfef</a>
  <a>33fv</a>
  <a>vef3</a>
  <a>f3rr</a>
  <a>ber3</a>
  <a>b4t3</a>
  <a>nyjk</a>
  <a>dsfj</a>
  <a>rg4h</a>
  <a>nlkg</a>
  <a>gvre</a>
  <a>berg</a>
  <a>grgg</a>
  <a>gr4g</a>
</nav>

赞(0）回复(0）举报 2023-06-25

cpjpxq1n3#

您应该使用一个弹性框或网格来 Package 所有这些导航链接。然后在css中，你可以使用media queries来根据屏幕宽度改变布局。
我建议你学习这一点，因为它是一个非常强大的工具来制作响应式网站。

赞(0）回复(0）举报 2023-06-25