ისწავლეთ როგორ გააკეთოთ ტექსტის გადატანა მცურავი სურათის გარშემო CSS-ით.
იმისათვის, რომ თქვენი ტექსტი გადაიტანოთ სურათზე მარჯვნივ, ისევე, როგორც ეს არის ამ სტატიის გაცნობის ფოტოში, გამოიყენეთ CSS წესი ასეთი:
float: მარცხენა წესი აიძულებს გამოსახულებას მარცხენა კიდეზე გადავიდეს. padding-right წესი ხელს უშლის ტექსტის შეჯახებას სურათის მარჯვენა მხარეს. თუ ამ სურათს საზღვარი დაემატება, შიგთავსი მოვა სურათსა და საზღვრებს შორის. იხილეთ სექცია 2, რომ იმუშაოთ სურათთან საზღვართან.
შემდეგი, დაამატეთ მინდვრები გამოსახულების მარცხნივ და მარჯვნივ მის ცენტრში. მარცხენა და მარჯვენა მინდვრების შესაბამისი მნიშვნელობა რაიმეს ცენტრისთვის არის ავტო.
სქელი, ჩარჩოს მსგავსი საზღვრის შესაქმნელად ღარი საზღვრის სტილის გამოყენებით, შეიძლება გამოიყენოთ ასეთი წესი:
სხვა საზღვრების სტილებია მყარი, წერტილოვანი, წყვეტილი, ორმაგი, ქედი, ჩასმული და საწყისი. სიგანე შეიძლება გამოიხატოს პიქსელებში, ems-ში ან პროცენტებში.
საზღვრები შეიძლება შერჩევით იქნას გამოყენებული სურათის ზედა, მარჯვნივ, ქვედა და მარცხნივ. თქვენ შეგიძლიათ გამოიყენოთ ეს ცოდნა წვეთოვანი ჩრდილის მსგავსი ეფექტის შესაქმნელად.
ნაცრისფერი 2 ჩრდილის მყარი საზღვრის გამოყენებით მხოლოდ მარჯვენა და ქვედა საზღვრებზე, თქვენ მიიღებთ ვარდნის ჩრდილის ეფექტს.
img { float: მარცხენა; სასაზღვრო-მარჯვენა სტილის: მყარი; საზღვარი-მარჯვნივ-სიგანე: 8px; საზღვარი-მარჯვნივ-ფერი: #CCCCCC; სასაზღვრო ქვედა სტილის: მყარი; საზღვარი ქვედა სიგანე: 8 პიქსელი; საზღვარი-ქვედა-ფერი: #999999; margin-right: 1em; ზღვარი-ქვედა: 1მ; }
რჩევა
თუ თქვენ გაქვთ სურათები გვერდის ერთზე მეტ განყოფილებაში (div), გამოიყენეთ შთამომავლობის ამომრჩეველები, რათა მათ ინდივიდუალურად გააფორმოთ. შესაძლო სელექტორები: #content img, #sidebar img, #feature img.
