CSS თვისება float:left; (right)

21-03-2021, 11:22

განვიხილოთ CSS თვისება float, რომლითაც შესაძლებელი ხდება საიტის სტრუქტურის შექმნა ბლოკების საშუალებით.
მანამდე შეგახსენებთ, რომ ბრაუზერი html კოდებს კითხულობს ზემოდან ქვემოთ და მარცხნიდან მარჯვნივ. ის განსაზღვრავს თითოეული ელემენტის სტილს და წარმოაჩენს ვიზუალურად. როგორც ვიცით ბლოკები განლაგებულია თანმიმდევრულად, ერთმანეთის ქვემოთ, მიუხედავად მათი ზომებისა. ანუ თუ ბლოკის სიგანე მცირეა, მის გვერდით მაინც ვერ განთავსდება სხვა ბლოკი, რადგან მას მთელ სიგანეზე დაკავებული აქვს სივრცე.
რომელიმე ბლოკისთვის float-ის მინიჭებით ის (ბლოკი), თითქოს ამოვარდება სიბრტყიდან, აიწევს მაღლა სივრცეში და მის ადგილზე შეცურდება ქვემოთ მდებარე ბლოკი, მაგრამ არის ერთი ნიუანსი: ქვედა ბლოკის შიგთავსი ვერ დაიკავებს იმ ადგილს, სადაც ეს ამოვარდნილი ბლოკი იყო სიბრტყეზე. ანუ მხატვრულად რომ ვთქვათ, სივრცეში აწეული ბლოკი ტოვებს ჩრდილს, რომლის გადაკვეთა ქვედა ბლოკის შიგთავს არ შეუძლია.

HTML-კოდი:

<!DOCTYPE HTML>
<html>
<header>
    <meta charset=utf-8>
    <title>Float</title>
    <link  href="main.css" type="text/css" rel="stylesheet" />    
</header>
<body>
<br/>
    <div id="parent" >    
        <div class="children4">    
            <h2>4 ბლოკი</h2>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat quia et ab, autem placeat dicta distinctio repellendus maxime a inventore provident ut commodi dolore? Consectetur vitae iure quam sequi quos.</p>    
        
        </div>
        <div class="children1">    
        <h2>პირველი ბლოკი</h2>    
        </div>    

        <div class="children2">
            <h2>მეორე ბლოკი</h2>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio esse obcaecati incidunt, ipsam laboriosam accusamus nisi nam suscipit, optio veritatis iusto hic maiores magni enim quidem quia architecto voluptatibus.</p>
        
        </div>

        <!--<div class="clear"></div>--> 
        <div class="children3">    
            <h2>მესამე ბლოკი</h2>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat quia et ab, autem placeat dicta distinctio repellendus maxime a inventore provident ut commodi dolore? Consectetur vitae iure quam sequi quos.</p>    
        
        </div>
        
      <div class="clear"></div>   
    
        <div class="children4">    
            <h2>4 ბლოკი</h2>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat quia et ab, autem placeat dicta distinctio repellendus maxime a inventore provident ut commodi dolore? Consectetur vitae iure quam sequi quos.</p>    
        
        </div>
    </div>

</body>
</html>

CSS-კოდი:

body{
background:#fff;
}
p{
    font-size: 12px;
    color:#000;
    padding: 5px;
}

#parent {
    width: 100%;
    //height:500px;
    outline:1px solid red;
    margin: 0 auto;
    border: 1px solid #000;
    //overflow:hidden;
}


/*
#parent div{
    float: left;
    margin:10px;
}
*/

.children1{
    width: 250px;
    height:300px;
    border: 2px solid #544BFF;
    background:  #33FF0F;
    opacity: 0.5;
    //float: left; /* თუ კომენტირებას მოვხსნით პირველი ბლოკი ამოვარდა ნაკადიდან */
    //float: right;
}
.children2{
    width: 550px;
    height:150px;
    border: 2px solid #544BFF;
    background:  #F3FF0A;
    opacity: 0.5;
    //float: left;
    //float: right;
    
}
.children3{
    width: 400px;
    height:210px;
    margin-left:270px;
    border: 2px solid #544BFF;
    background:  #FF2F14;
    //float: left;
    //float: right;
}
.children4{
    width: 100%;
    height:110px;
    border: 2px solid green;
    background:  #2368A0FF;
    //float: right;
}

.clear{
    clear: both;
}

იგივე საკითხები სხვა მაგალითებით განხილული მაქვს ძველ საიტზეც

CSS თვისება float:left; (right)

მსგავსი სიახლე