HTML-und CSS-Fluid-Kreis
Ich bin versuchen, um eine fluid-Kreis mit HTML und CSS. Ich bin fast fertig aber wie sollte es auch flüssig und der Inhalt ist dynamisch, Sie verändert Ihre Form vom Kreis zum oval und andere.
CSS:
body {
position: relative;
}
.notify {
position: absolute;
top: 100%;
left: 20%;
background: red;
border: 2px solid white;
border-radius: 50%;
text-align: center;
}
.notify > div {
padding: 20px;
}
HTML:
<div class="notify">
<div>
12
</div>
</div>
Können Sie mir bitte helfen?
- Stellen Sie sicher, testen Sie es ändern von text innerhalb des div, die von 12 bis 100 und etc
- Ich habe viele Antworten darauf, die Verwendung von JavaScript, um die Durchsetzung einer quadratischen Seitenverhältnis des Elements für eine 50% border-radius. Ich schrieb vor kurzem einen blog-post auf, wie dies getan werden kann, allein mit CSS: ansciath.tumblr.com/post/7347495869/css-aspect-ratio
- Oh, und Safari noch nicht ordnungsgemäß zu behandeln einen border-radius in Prozent angegeben.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
border-radius:50%
hack, die Sie verwenden wird von der Annahme ausgegangen, dass die<div>
ist Platz, vor der abgerundeten Ecken angewendet werden, da es sonst zu einem oval statt einem Kreis, genau, wie Sie bemerkt haben.Deshalb, wenn Sie wollen, dass der Kreis zu bleiben Runder als die Inhalte erweitert, die Sie benötigen, um dynamisch stellen Sie die Höhe entsprechend der Breite. Sie würden wahrscheinlich benötigen, um mit Javascript zu erreichen.
Beachten Sie bitte auch, dass
border-radius
wird nicht unterstützt in älteren Versionen von IE, so dass die Nutzer mit IE6, IE7 oder IE8 nicht sehen, Ihren Kreis an alle. (obwohl es einen hack genannt CSS3Pie)Natürlich, die Anpassung der
height
haben den Nebeneffekt, dass das element mehr Raum vertikal. Dies kann nicht sein, was Sie wollen, Sie können wollen, dass der Kreis die gleiche Größe, unabhängig davon, welche Inhalte in ihm? In diesem Fall sollten Sie fix die Höhe und Breite des Kreises, und geben Sie den Inhaltposition:absolute;
zu verhindern, dass es Auswirkungen auf die Größe des übergeordneten Elements ein.Alternative zur Verwendung der
border-radius
hack um einen Kreis zu erzeugen wäre die Nutzung von SVG. SVG ist ein Vektorgrafik-format, das eingebettet ist in den meisten Browsern.Wieder, die Bemerkenswerte Ausnahme ist IE8 und früher, aber der IE unterstützt ein Alternatives format, genannt VML. Verschiedene scripts existieren, die konvertieren kann zwischen SVG und VML, so können Sie erzeugen eine cross-browser-Lösung mit SVG-plus Javascript.
Werden, wenn wir akzeptieren, den Javascript-Teil der Lösung ist, könnte man einfach eine javascript-Bibliothek zum zeichnen es in den ersten Platz. Mein Vorschlag HIERFÜR wäre Raphael, das erzeugt SVG oder VML-Grafiken gemäß den browser läuft es.
Hoffe, das hilft.
Müssen Sie beide
width
undheight
auf das maximum von diesen beiden, um ein Quadrat, dass mit 50% radius-Ecken, die Ergebnisse in einen Kreis.Dazu können Sie in jQuery:
Versuchen zum ändern von Inhalten (sowohl in der Breite und Höhe) hier
Beispiel für eine fluid-Kreis mit nur HTML und CSS. Wie bereits in meinen Ausführungen zu der Frage, die Technik ist erläutert in meinem blog-post. Auch wie bereits erwähnt, ist Safari derzeit nicht spielen schön mit einem border-radius angegeben als Prozentsatz.
Die Art und Weise, wie
Jose Rui Santos
haben können Sie Ihr Ziel erreichen. Aber tun einige änderungen in der css.Wie entfernen, Polsterung aus
.notify > div
und Stile hinzufügen, wie dies:hinzufügen und Polsterung in
.notify
Klasse wie folgt aus:- und Jquery-code, der wie erwähnt von
Jose Rui Santos
:Siehe die arbeiten Demo: http://jsfiddle.net/2j5Ek/63/
Zwingen, seine maximale Höhe und Gewicht durch die Einstellung
max-width:XXpx; max-height:XXpx
wird die Arbeit machen.Bitte beachten Sie, dass Sie möglicherweise verwenden müssen, CSS3
word-wrap: break-word;
zu brechen, die Worte. Cross-browser-Kompatibilität kann ein Problem sein.müssen Sie einen Weg, um durchzusetzen, Höhe /Breite, sonst wird es nur gehen, oval... es ist möglich!
auf dieser html -
diesem jQuery script sollte es tun..
content inside is dynamic
. Dies bedeutet, es kann ändern Sie die Höhe oder Breite. Warum sollte immer die Breite > Höhe?