NTM Solutions

Thứ Hai, 16 tháng 4, 2018

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

Quay về MỤC LỤC TỰ HỌC CSS


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:

Quay về MỤC LỤC TỰ HỌC CSS


Tác giả: #drM

Nguồn: Sưu Tầm

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS