Div als prozentuale Breite der Eltern, Eltern.

Question

Derzeit arbeitet er an einem interessanten Problem, wo ich die aktuelle HTML-Struktur haben:

<div class='parents-parent'> 
    <div class='parent'> 
     <div style='width: 50%'></div> 
    </div> 

    <div class='parent'> 
     <div style='width: 25%'></div> 
    </div> 

    <div class='parent'> 
     <div style='width: 25%'></div> 
    </div> 
</div> 

Die Mutter divs bevölkert werden über Angular UI Router und jede Ansicht/Teil hat seine eigene unabhängige Breite ist. Die 'Eltern'-Divs fungieren lediglich als dynamischer Container, so dass sie keine Breite haben, da dies vom Kind gesteuert wird. Aus diesem Grund funktioniert die prozentuale Breite nicht für die untergeordneten Elemente.

Ist es möglich, dass ein untergeordnetes Element eine prozentuale Breite des Eltern-Eltern-Bereichs hat?

Answer 1

Stile können nichts anderes als ein Element oder Kinder betreffen. Und derzeit gibt es keine Selektoren, die die Änderung von übergeordneten Elementen zulassen.

Answer 2

ich eine Lösung gefunden, indem Sie versuchen, aber es geht nicht im Code keine Leerzeichen oder Zeilenumbrüche zwischen den DIV-Elemente (dh den gesamten HTML-Code in * eine * Zeile): Stellen Sie parent ein Inline-Element und das Eltern Kinder Inline-Blöcke. Es ist nicht ganz logisch, und es könnte auf jedem Browser nicht funktionieren, aber zumindest hier (auf Firefox Mac) es funktioniert ...

html, 
 
body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    display: inline; 
 
} 
 
.parent>div { 
 
    display: inline-block; 
 
}

<div class='parents-parent'><div class='parent'><div style='width: 50%;background:green;'>A</div></div><div class='parent'><div style='width: 25%;background:red;'>B</div></div><div class='parent'><div style='width: 25%;background:blue;'>C</div></div></div>