NTM Solutions

Facebook Youtube Google+

Thứ Hai, 16 tháng 4, 2018

Tự học CSS - Bài 21 – Giá trị inline-block



Thuộc tính display:inline-block làm cho đối tượng có thuộc tính giống đối tượng inline nhưng có bề rộng và chiều cao.
VÍ dụ 1: ta tạo các đối tượng float( kết hợp clear thẻ div ở cuối để chặn không cho nổi lên)
.floating-box {
    float
: left;
    width
: 150px;
    height
: 75px;
    margin
: 10px;
    border
: 3px solid #73AD21;
}

.after-box
{
    clear
: left;
}
Và các giá trị HTML trong phần body:
<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

Ví dụ 2: dùng thuộc tính display:inline-block -> ta không cần dùng thuộc tính clear chặn thẻ div “after-box” nổi lên nữa.
Thay các giá trị trong phần CSS như sau:
.floating-box {
    display
: inline-block;
    width
: 150px;
    height
: 75px;
    margin
: 10px;
    border
: 3px solid #73AD21;
}
.after-box {
    border
: 3px solid red;
}

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Nguồn: Lớp học vi tính .COM