Ich benutze twitter bootstrap 2.1.1 mit einem responsiven Layout und ich würde gerne ein Label in der untere rechte Ecke des Bildes. Eines der Probleme, die ich habe, ist, weil es reagiert, wenn das Thumbnail breiter als das Bild ist, das es zu weit schwimmt. Das andere Problem ist, ich kann nicht scheinen, dass es nach rechts schwebt. Ich sollte auch hinzufügen, dass, obwohl ich es in der rechten unteren Ecke möchte ich es um ein paar Pixel versetzt, es ist nicht direkt am Rand des Bildes. Außerdem kann der Text immer ein Foto sein, wenn ein Standardbild angezeigt wird.
Hier ist mein HTML soweit
%Vor%und hier ist mein CSS
%Vor%Ich habe auch ein jsfiddle für ein besseres Beispiel.
Vielleicht ist der richtige Weg, um dies zu tun, nur die maximale Breite der Fotogruppe 300 zu machen, aber ich denke, dass diese Art von Aussehen auf einem Desktop-Vollbild lustig aussieht.
Hier ist meine Version der Geige: Ссылка
Im Wesentlichen müssen Sie sowohl das Bild als auch das Etikett mit einem Wrapper versehen, damit Sie das Etikett innerhalb dieses Wrappers absolut positionieren können:
%Vor%Und dann können Sie mit einem CSS das Foto so zentrieren, dass es zentriert wird, aber auch nur so groß wie das Bild darin (die Beschriftung ist absolut positioniert, so dass sie effektiv aus dem Seitenfluss entfernt wird und keinen Einfluss hat) Breite der Eltern usw.):
%Vor%Und entfernen Sie den linken Rand: auto / margin-right: auto von der .thumbnail & gt; a & gt; Img-Regel. Um das Etikett leicht von den Seiten des Bildes zu versetzen, verwenden Sie:
%Vor%Und setze 5px auf was auch immer die Offsets sein sollen.
Tags und Links html css html5 css3 twitter-bootstrap