Wie Inline div Elemente schrumpfen Breite, wenn Elternteil schrumpft

Hier ein jsfiddle das Verhalten zeigen, ich implementieren möchten:Wie Inline div Elemente schrumpfen Breite, wenn Elternteil schrumpft

JSFiddle That Uses Flex Layout

<span>See JSFiddle For Code</span>

Image Showing Rightmost Div Displaying Ellipsis

Sie sehen, dass ich mehrere div haben Elemente in einer Reihe angezeigt. Jedes div zeigt Text an. Da das übergeordnete div schmaler wird, möchte ich, dass das rechts am aktuellsten angezeigte div verkleinert wird (Ellipsen werden angezeigt). Beachten Sie, dass beim Verkleinern der Fidel-Frame-Breite oder beim Verkleinern des Browsers nur das äußerste rechte Div-Element verkleinert wird und die Ellipse angezeigt wird.

Die jsfiddle verwendet Flex-Layout, um dies zu tun, aber ich brauche eine Lösung, die nicht Flex-Layout oder JavaScript verwendet.

Ich habe versucht, mit der Herstellung jedes Div-Display zu mischen: Inline-Block und ein paar andere Techniken, aber kein Glück.

Quelle

2016-05-04 steve

Ich denke, du willst so. freundlicherweise demo überprüfen

.parent 
{ 
    display: table; 
} 
.child 
{ 
display: table-cell; 
}

Quelle

2016-05-04 05:24:53

Nein. Das ist es nicht. Was Sie getan haben, ist eine Tabelle, in der alle divs in der Tabelle gleichzeitig schrumpfen und expandieren. Ich bin auf der Suche nach einem Weg, immer das rechte Div zu schrumpfen. Schau dir das JSFiddle an, das ich geschrieben habe und sieh, wie es sich verhält. Ich muss das gleiche tun, OHNE das Flex-Layout zu verwenden. – steve

Ihr Beispiel erweitert und verkleinert alle Divs zusammen. Das ist nicht das gleiche Verhalten wie mein Beispiel, das kontrahiert, was immer das rechte Div ist. Verwenden Sie mein JSFiddle-Beispiel, und ändern Sie die Breite des Browsers und sehen Sie, wie es immer das am weitesten rechts liegende div ist, das verkleinert wird. – steve

dachte ich es aus und die JSFiddle aktualisiert um zu zeigen, wie es zu tun, indem Sie einfach mit display: inline. Die Flex-Lösung war viel komplizierter als nötig.

Quelle

2016-05-06 12:55:20 steve

Wie Inline div Elemente schrumpfen Breite, wenn Elternteil schrumpft

Antwort

Verwandte Themen