Kind nimmt Breite% vom Eltern-Elternteil
Ist das folgende Ergebnis mit CSS möglich: 
Damit li.item 50% der Breite von div.wrapper und nicht die ul.list (die extrem lang ist) benötigt. Ich habe einen Ausschnitt aus einer Grundkonfiguration hinzugefügt. Alle Ideen zu diesem Thema sind willkommen (bitte beachten Sie, dass ich nach CSS-Optionen suche). Ein Spielplatz-Link: Ссылка
2 Antworten
Ich glaube, es gibt einige Workaround Lösungen für Ihr Problem, daher werde ich einige meiner Ideen einbringen, vielleicht wird es Ihnen dabei helfen.
Idee 1: Position absolut und eine Reihe von: n-Kind-Selektoren
Damit die .item ihre Breite relativ zu .list wrapper haben, können Sie diese Elemente absolut positionieren und .list wrapper auf relative Position setzen, so dass die .item Breite basierend auf berechnet wird .list width.
Der Haupt-Untergang dieser Idee wäre, dass Sie diese Elemente neben jedem positionieren müssen, wie zum Beispiel mit der left -Eigenschaft, aber wie eine Schleife:
- Erster Eintrag wird übrig bleiben: 0;
- Zweites Element bleibt übrig: 50%;
- das dritte Element bleibt übrig: 100%;
- und so weiter ... + 50% bis zum nächsten Artikel
Sie können entweder eine Reihe von: nth-child (n) einfüllen, jede mit + 50% linker Stütze. voneinander OR verwenden Sie sass , um es schneller zu machen.
Sehen Sie sich die Demo hier an & amp; sass Demo hier
Idee 2: Anzeige: flex
Wenn Sie display: flex auf .wrapper verwenden, können Sie die Breite von .item relativ zu ihrem Großelternteil haben.
Der Hauptsturz dieser Idee wäre, dass die Breite von .list element durch die Breite von .wrapper überschrieben wird, egal ob Sie sie angeben oder nicht. Allerdings ist nicht alles verloren. Wenn Sie für ein bestimmtes Styling diese bestimmte Breite benötigen, können Sie sie angeben und einige Pseudoklassen mit width: inherit verwenden, sodass sie auf die von Ihnen angegebene Breite ausgedehnt werden der erste Ort.
Sehen Sie sich die Demo hier
an
Tags und Links css