2
Ich habe eine Reihe von festen Größen in einem Container von begrenzter Größe. Wenn zu viele untergeordnete Elemente vorhanden sind, möchte ich, dass sie sich überlappen (rechts oben ganz oben), anstatt zu überfüllen oder zu wickeln.Überlappende Kinder statt Überlauf
Kann dies getan werden, indem einfach die Container- und Kindelemente selbst entworfen werden, ohne JavaScript oder spezielle Elemente?
<div class="items">
<div>A</div>
<div>B</div>
</div>
Der gewünschte Effekt ist dies, aber ohne die zusätzliche Umhüllung divs und mit der Basis-Elementbreite im voraus wissen (die Breite auf .items > div).
.items {
background: #FFB600;
display: flex;
flex-direction: row;
left: 5px;
bottom: 5px;
width: 90px;
padding: 8px;
margin: 10px;
}
.items > div {
flex: 0 1 20px;/*16px icon + 4px spacing*/
height: 16px;
position: relative;
}
.items > div > div {
position: absolute;
width: 16px;
height: 16px;
opacity: 0.9;
}
/*Give each a different colour/apperance*/
.items > div:nth-child(1) > div {
background: #0026FF;
}
.items > div:nth-child(2) > div {
background: #0094FF;
}
.items > div:nth-child(3) > div {
background: #004A7F;
}
.items > div:nth-child(4) > div {
background: #00137F;
}
.items > div:nth-child(5) > div {
background: #7F92FF;
}
.items > div:nth-child(6) > div {
background: #7FC9FF;
}
.items > div:nth-child(7) > div {
background: #007F7F;
}
.items > div:nth-child(8) > div {
background: #00FFFF;
}<div class="items">
<div>
<div></div>
</div>
</div>
<div class="items"><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
https://StackOverflow.com/q/43919067/3597276 –
Nun, ich denke, wenn CSS/HTML es nicht kann, ist eine solche JS-Lösung eine Option. Wenn es eine einfache CSS-Lösung ID gibt, bevorzugen Sie das natürlich. –
Ich hatte eine Lösung für diesen anderen Beitrag geschrieben, CSS3 Grid Layout verwenden, die ich gelöscht, weil der Fragesteller nicht interessiert war. Aber hier ist das Konzept für den Fall, dass es Ihnen hilft (reines CSS): https://jsfiddle.net/agcxxtxa/1/ –