Გააზრება CSS Float

გამოყენებით CSS float ქონების დიზაინი ვებ გვერდი დაბრუნება

CSS ქონების განლაგება ძალიან მნიშვნელოვანია განლაგებით. ეს საშუალებას გაძლევთ განათავსოთ თქვენი ვებ გვერდი დიზაინის ზუსტად ისე, როგორც თქვენ გინდათ, რომ ისინი არიან, მაგრამ იმისათვის, რომ გამოიყენოთ ის, თქვენ უნდა გვესმოდეს, თუ როგორ მუშაობს.

სტილი ფურცელი, CSS float ქონების ასე გამოიყურება:

.right {float: right; }

ეს გვეუბნება ბრაუზერს, რომ ყველაფერი "უფლება" კლასით უნდა ჩამოყალიბდეს მარჯვნივ.

ასე რომ,

class = "right" />

რა შეგიძლიათ Float ერთად CSS float ქონება?

ვებ-გვერდზე არ შეგიძლია ფსონების ყველა ელემენტი. ბლოკ-დონის ელემენტებს მხოლოდ დინება შეუძლია. ეს არის ელემენტები, რომლებიც აიღებენ სივრცეში ბლოკირებას გვერდზე, როგორიცაა სურათები (), პუნქტები (), დაყოფა (), და სიები ().

სხვა ელემენტები, რომლებიც გავლენას ახდენენ ტექსტში, მაგრამ არ ქმნიან ყუთს გვერდს უწოდებენ inline ელემენტებს და არ შეიძლება ჩაითვალოს. ეს არის ელემენტები, როგორიცაა span (), ხაზის შესვენებები (), ძლიერი აქცენტი (), ან იტალიური ().

სად მიდიან ისინი?

თქვენ შეგიძლიათ ელემენტების დასაფარად მარჯვნივ ან მარცხნივ. ნებისმიერი ელემენტი, რომელიც მოჰყვება მცურავ ელემენტს, მეორე მხარეს გადაადგილდება.

მაგალითად, თუ მე გამოსახულია მარცხნივ გამოსახულებაზე, ნებისმიერი ტექსტის ან სხვა ელემენტები მას შემდეგ, რაც მის ირგვლივ მივდივართ მარჯვნივ. და თუ მე გამოსახულია გამოსახულება მარჯვნივ, ნებისმიერი ტექსტის ან სხვა ელემენტები შემდეგ ის შემოვა გარშემო ეს მარცხნივ. გამოსახულება, რომელიც განთავსდება ტექსტის ბლოკზე, მასზე გამოყენებული ნებისმიერი სითხის სტილის გარეშე გამოჩნდება, თუმცა ბრაუზერი გამოსახულია გამოსახულების ჩვენება.

ეს, როგორც წესი, გამოსახულების ბოლოში ნაჩვენები ტექსტის პირველი ხაზია.

რამდენად შორს არიან ისინი?

ელემენტს, რომელიც უკვე ჩამოყალიბდა , გადაადგილდება, რამდენადაც კონტეინერის ელემენტის მარცხნივ ან მარჯვნივ, მას შეუძლია. ეს იწვევს სხვადასხვა სიტუაციებში იმის მიხედვით, თუ როგორ იწერება თქვენი კოდი.

ამ მაგალითებისთვის, მე ვიქნები მცირე DIV ელემენტი მარცხნივ:

• თუ ნაკადის ელემენტს არ აქვს წინასწარ განსაზღვრული სიგანე, ის მიიღებს იმდენი ჰორიზონტალურ სივრცეს, როგორც საჭიროა და ხელმისაწვდომია, მიუხედავად float. შენიშვნა: ზოგი ბრაუზერი მცდელობებს წყვეტს ელემენტებთან ერთად, როდესაც სიგანე არ არის განსაზღვრული, როგორც წესი, არაფატარატირებული ელემენტის მინიჭება მხოლოდ მცირე რაოდენობით. ასე რომ, ყოველთვის უნდა განსაზღვროთ სიგანეზე განლაგებული ელემენტები.
• თუ კონტეინერის ელემენტი არის HTML ელემენტი, ჩამოყალიბებული DIV გვერდი დარჩება მარცხენა მარჟის გვერდზე.
• თუ კონტეინერის ელემენტი თავისთავად შეიცავს რაღაცას, აღინიშნება DIV კონტეინერის მარცხენა ზღვარს.
• თქვენ შეგიძლიათ ბუდე ბრტყელი ელემენტები, და ეს შეიძლება გამოიწვიოს float დამთავრებული გასაკვირი ადგილი. მაგალითად, ეს float არის მარცხენა მცურავი DIV შიგნით მარჯვენა მცურავი DIV.
• კონტეინერში ოთახში განთავსებული ერთმანეთის გვერდით დგას მოძრავი ელემენტები. მაგალითად, ამ კონტეინერს გააჩნია 400px ფართო კონტეინერის სამი 100px ფართო DIV ელემენტები.

თქვენ შეგიძლიათ გამოიყენოთ floats შექმნა ფოტო გალერეა განლაგებას. თქვენ დააყენა თითოეული მინიატურების (ის მუშაობს საუკეთესო როდესაც ისინი ყველა იგივე ზომა) in DIV ერთად წარწერა და float DIV ელემენტები კონტეინერში.

არ აქვს მნიშვნელობა, თუ რამდენად ფართო ბრაუზერის ფანჯარა, მინიატურების იქნება გამოდიან ერთნაირად.

გამორთვა Float

მას შემდეგ, რაც თქვენ იცით, თუ როგორ უნდა მიიღოს ელემენტის float, მნიშვნელოვანია იცოდეს, თუ როგორ უნდა გამორთოთ float. თქვენ გამორთეთ float ერთად CSS წმინდა ქონება. თქვენ შეგიძლიათ წაშალოთ მარცხენა მოძრავი, მარჯვენა მოძრავი ან ორივე:

ნათელი: მარცხნივ;
გასაგებია: უფლება;
ნათელია: ორივე;

ნებისმიერ ელემენტს, რომელიც შენს წმინდა ობიექტს ათავსებთ , გამოჩნდება ქვემოთ ჩამოთვლილი ელემენტი. მაგალითად, ამ მაგალითში ტექსტის პირველი ორი პუნქტი არ არის გაწმენდილი, მაგრამ მესამე.

ითამაშეთ სხვადასხვა ელემენტების წმინდა მნიშვნელობას თქვენს დოკუმენტებში სხვადასხვა განლაგების ეფექტების მისაღებად.

ერთ-ერთი ყველაზე საინტერესო მცურავი ფორმატია ტექსტითა პარაგრაფების შემდეგ მარჯვენა ან მარცხენა სვეტის გამოსახულების რიგი. მაშინაც კი, თუ ტექსტი არ არის საკმარისად საკმარისი იმისათვის, რომ გაეცნოთ სურათს, შეგიძლიათ გამოიყენოთ ყველა გამოსახულება, რათა დარწმუნდეთ, რომ სვეტში გამოჩნდება, ვიდრე წინა გამოსახულების შემდეგ.

HTML (გაიმეორეთ ეს პუნქტი):

მიუხედავად იმისა, რომ იშვიათი დრო სხვებს არ იშურებდნენ, ისინი რეპატრიანტებმა შეინარჩუნეს. მოყვარულებს არაფერს აკეთებენ, რათა გაეცნონ და გაახარონ.

CSS (მარცხნივ გამოსახულებები):

img.float {float: left;
ნათელი: მარცხნივ;
ზღვარი: 5px;
}

და მარჯვნივ:

img.float {float: right;
გასაგებია: უფლება;
ზღვარი: 5px;
}

განლაგების განყოფილებების გამოყენება

მას შემდეგ, რაც გესმით, თუ როგორ float ქონების მუშაობს, შეგიძლიათ გამოიყენოთ იგი ჩაუყარა თქვენი ვებ გვერდები. ეს არის ის ნაბიჯები, რომლებიც მე გადაადგილებული ვებ-გვერდის შექმნაა:

• დიზაინის განლაგება (ქაღალდზე ან გრაფიკულ ინსტრუმენტზე ან ჩემს სათაოში).
• განსაზღვრა, თუ სად იყოფა გვერდზე განყოფილებები.
• განსაზღვრავენ სხვადასხვა კონტეინერების და მათი ელემენტების სიგანეებს.
• ყველაფრის მოხსნა. მაშინაც კი, ყველაზე გარე კონტეინერი ელემენტი ჩამოშორებულია მარცხნივ ისე, რომ მე ვიცი, სად იქნება ეს ბრაუზერის ხედთან დაკავშირებით.

სანამ თქვენ იცით განლაგების განყოფილებების სიგანე (პროცენტული ჯარიმაა), შეგიძლიათ გამოიყენოთ float- ის ქონება, სადაც ისინი განთავსდებიან გვერდზე. და სასიამოვნო რამ არის, თქვენ არ უნდა ფიქრი იმდენად შესახებ ყუთი მოდელი, რომელიც განსხვავდება Internet Explorer ან Firefox.