html – 布局取决于元素的数量

概述我有一个可以包含2个,3个或4个元素的包装器(我事先不知道它,因为每个元素都会呈现自身,具体取决于API响应). 如果有3个(或更少)我想让它们堆叠如下： 没什么大不了.但当有4个时,我需要这个其他布局： 到目前为止,我认为CSS Grid是可行的方式,我试过： /* Just to add some interaction to the demo */const w = document.g 我有一个可以包含2个,3个或4个元素的包装器(我事先不知道它,因为每个元素都会呈现自身,具体取决于API响应).

如果有3个(或更少)我想让它们堆叠如下：

没什么大不了.但当有4个时,我需要这个其他布局：

到目前为止,我认为CSS GrID是可行的方式,我试过：

/* Just to add some interaction to the demo */const w = document.getElementByID("wrapper");let x;function toggle(event) {  const d = document.getElementByID("D");  return d     ?       x = d.cloneNode() && w.removeChild(d)     : w.appendChild(x);}

#wrapper {  wIDth: 100%;  max-wIDth: 500px;  display: grID;  grID-template-columns: 1fr 1fr;  grID-gap: 10px;}.item {  grID-column-start: span 2}.item:nth-last-child(1),.item:nth-last-child(2) {  grID-column-start: auto;}/* Non-relevant CSS here: */button {  margin: 20px auto;  Font-size: 16px;  padding: 3px 6px;  border-radius: 6px;}#A { background: #7984f7 }#B { background: #cb8af8 }#C { background: #8cd4fb }#D { background: #97f8d8 }.item {  border-radius: 6px;  padding: 10px 0;  Font-family: sans-serif;  Font-weight: bold;  color: white;  text-align: center;}

<div ID="wrapper">  <div ID="A" >A</div>  <div ID="B" >B</div>  <div ID="C" >C</div>  <div ID="D" >D</div></div><button onclick="toggle()">Click me!</button>

但它不适用于3个元素……事实上,我已经尝试了很多东西(所有CSS GrID相关)并且可能有一个我现在看不到的更简单的解决方案…任何帮助将不胜感激！

解决方法 使用CSS网格：

>默认情况下,显示两列中的所有项目
>在单列中显示项目1和2
>只有当它是最后一项时,才在单列中显示第3项

一个副作用是,如果有超过4个项目,则其他项目将显示在两列中.

/* Just to add some interaction to the demo */const w = document.getElementByID("wrapper");let x;function toggle(event) {  const d = document.getElementByID("D");  return d     ?       x = d.cloneNode() && w.removeChild(d)     : w.appendChild(x);}

#wrapper {  wIDth: 100%;  max-wIDth: 500px;  display: grID;  grID-template-columns: 1fr 1fr;  grID-gap: 10px;}.item {  grID-column-start: auto;}.item:nth-child(1),.item:nth-child(2),.item:nth-child(3):last-child {  grID-column-start: span 2;}/* Non-relevant CSS here: */button {  margin: 20px auto;  Font-size: 16px;  padding: 3px 6px;  border-radius: 6px;}#A { background: #7984f7 }#B { background: #cb8af8 }#C { background: #8cd4fb }#D { background: #97f8d8 }.item {  border-radius: 6px;  padding: 10px 0;  Font-family: sans-serif;  Font-weight: bold;  color: white;  text-align: center;}

<div ID="wrapper">  <div ID="A" >A</div>  <div ID="B" >B</div>  <div ID="C" >C</div>  <div ID="D" >D</div></div><button onclick="toggle()">Click me!</button>

总结

以上是内存溢出为你收集整理的html – 布局取决于元素的数量全部内容，希望文章能够帮你解决html – 布局取决于元素的数量所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。