Dowiedz się, jak sprawić, by tekst zawijał się wokół pływającego obrazu za pomocą CSS.
Aby tekst zawijał się wokół obrazu po prawej stronie, podobnie jak na zdjęciu wprowadzającym do tego artykułu, użyj reguły CSS takiej jak ta:
Reguła float: left sprawia, że obrazek przesuwa się do lewego marginesu. Zasada padding-right zapobiega uderzaniu tekstu w prawą stronę obrazu. Jeśli do tego obrazu dodano obramowanie, dopełnienie znalazłoby się między obrazem a obramowaniem. Zobacz sekcję 2, aby pracować z obrazem z ramką.
Następnie dodaj marginesy z lewej i prawej strony obrazu, aby go wyśrodkować. Właściwą wartością dla lewego i prawego marginesu do wyśrodkowania czegokolwiek jest auto.
Aby utworzyć grubą ramkę przypominającą ramkę za pomocą stylu obramowania rowka, można zastosować następującą regułę:
Inne style obramowania to jednolita, kropkowana, przerywana, podwójna, kalenica, wstawka i początek. Szerokość można wyrazić w pikselach, emach lub procentach.
Ramki można nakładać selektywnie na górze, prawej, dolnej i lewej stronie obrazu. Możesz wykorzystać tę wiedzę, aby stworzyć efekt jak cień.
Używając solidnej ramki w 2 odcieniach szarości na prawej i dolnej krawędzi, uzyskasz efekt cienia.
img { float: lewo; styl obramowania w prawo: pełny; szerokość obramowania po prawej: 8px; kolor-prawego obramowania: #CCCCCC; border-bottom-style: solid; obramowanie-dolna-szerokość: 8px; kolor dolnego obramowania: #999999; margines-prawy: 1em; margines-dolny: 1em; }
Wskazówka
Jeśli masz obrazy w więcej niż jednym podziale (div) strony, użyj selektorów potomka, aby nadać im indywidualny styl. Możliwe selektory: #obraz treści, #obraz paska bocznego, # obraz funkcji.
