Wie macht man eine css Schnecke?

8

Ich habe ein Bild, das ich als Kreis mit ( border-radius:50% ) anzeigen möchte und in der gleichen Zeile möchte ich einen Text mit einer festgelegten Breite und Hintergrund haben. Ich möchte keine Werte hart codieren. Was ist der beste Weg, dies zu erreichen?

Hier ist ein Bild

Geige

%Vor% %Vor%     
naughty boy 27.01.2016, 00:00
quelle

5 Antworten

5

Sie könnten so etwas ausprobieren:

%Vor%     
PookMook 27.01.2016, 00:07
quelle
3

Mit Pseudoklassen und absoluter Positionierung können Sie den gewünschten Effekt erzielen.

Die folgende Antwort verwendet Ihren vorhandenen HTML-Code, sodass Sie nichts davon ändern müssen und lediglich Ihr CSS ändern.

Sie können dem Text etwas mehr Auffüllen hinzufügen, um ihn bei Bedarf etwas mehr zu spreizen, und der Hintergrund sollte sich selbst aussortieren.

%Vor% %Vor%
    
Stewartside 27.01.2016 08:54
quelle
1

Fügen Sie einfach position: absolute in i class hinzu und kontrollieren Sie den Rand von headingtext :

HTML:

%Vor%

CSS:

%Vor%

FIDDLE

    
Lekz Flores 27.01.2016 00:13
quelle
1

Verwenden Sie stattdessen ein Blockelement mit einem negativen Rand nach oben (Halbkreisgröße - die Hälfte der Füllung) und einem Rand nach links (Halbkreisgröße). Ändere einfach:

%Vor%

Beispiel Geige: Ссылка

    
Tino Rüb 27.01.2016 00:07
quelle
0

mach einfach einfach .header class position:relative; , wenn du irgendeine Höhe und Breite definieren willst, .i class position:absolute; gib Marge auf .headingtext class Ссылка Vielleicht ist es hilfreich für dich.

    
Muhammad Hamza Nisar 27.01.2016 08:42
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset HTTP-Anforderung in Swift ohne NSURLRequest