Ich habe mich gefragt, ob Sie mir dabei helfen können. Ich habe ein div (in weiß), wo ich zwei runde Knöpfe (in grün) an den Rändern anbringen muss. Alles sollte mit CSS gemacht werden. Es sollte so aussehen: Screenshot
Nun, die Sache ist, dass ich die Größe des weißen div nicht kenne, und ich werde es zum Zeitpunkt der Erstellung nicht wissen, weil es danach zum DOM hinzugefügt wird. Alles, was ich weiß, ist, dass das weiße div eine prozentuale Breite und Höhe relativ zu seinem zukünftigen Elternteil hat. Zum Zeitpunkt der Erstellung werden Aufrufe von width (), height () oder ihrer css-Werte nicht ausgeführt, da sie noch nicht hinzugefügt wurden. Ich habe all diese Schnipsel gesehen, die dir sagen, wie man ein div mit einem festen Seitenverhältnis macht. Ich brauche das jetzt, ich brauche den Button, um 1: 1 zu sein, aber alles, was ich über die Dimensionen weiß, ist, dass es 100% der Höhe des weißen div sein muss (und deshalb sollte seine Breite gleich wie seine Höhe sein ). Alle Beispiele, die ich gesehen habe, gehen davon aus, dass Sie die Breite kennen und die Höhe das Verhältnis halten. In meinem Fall, was ich weiß, ist die Höhe (100%) und ich möchte die Breite anpassen. Ich habe keine Ahnung, wie ich das erreichen kann.
Das ist mein Ausschnitt:
Wenn Sie wissen, wie ich dies tun kann, ohne einen festen Wert einzugeben (jQuery-Verwendung ist natürlich gültig), würde ich es sehr zu schätzen wissen.
Danke.
Hier gibt es viele Variablen:
height ist % und circle radius ist px units, eine ist statisch und die andere wird die Größe ändern. height % des Containers auch auf height des Kreises skaliert, die div width & amp; height auf etwas statisch wie px units. .arrow 's 100% height zu kommentieren, um die Größenänderung anders als 1: 1 zu verhindern und eine div darin zu verschachteln .arrow , um 1: 1 mit statischen Einheiten zu beschränken (idealerweise wirkt sich .arrow direkt auf weniger Code aus, aber wenn Sie sie nicht auf diesem Element setzen / nicht setzen können, denken Sie vielleicht darüber nach). Wenn der Kreis bei der Erweiterung des Inhalts kreisförmig bleiben soll, müssen Sie die Höhe dynamisch an die Breite anpassen. Sie könnten Javascript verwenden, um dies zu erreichen, aber Ihr border-radius ist an container in px statische Einheiten gebunden, da der Container immer größer ist, etwas wie border-radius: 50% würde nicht für beide funktionieren, 50% radius des Kreises würde nie 50% von container entsprechen (das heißt, wenn Sie sich um die Radiusausrichtung kümmern).
Warum machen Sie nicht eine feste Breite in Prozent für Ihren Pfeil:
%Vor%
Sie können die CSS-Pseudoselektoren before und after verwenden. Sie überprüfen dieses Beispiel .
Tags und Links javascript html jquery css css3