Giải phóng một float
Bạn đã học giải phóng một float ở học phần sau:
https://giaiphapwebtl.vn/cac-dac-tinh-phuong-thuc-bo-cuc-trang-phan-6/
Phần tiếp theo của trang chủ Pandaisia Chocolates chứa hai phần tử section tên là
“leftColumn” và “rightColumn”. Thiết lập width của left column thành 33 % của body
width và thiết lập width của right column thành 67 %. Làm trôi các section cạnh nhau
trên lề trái, nhưng chỉ khi left margin được giải phóng tất cả các đối tượng được làm
cho trôi trước đó.
Để làm trôi left và right column sections:
1. Quay trở lại file pc_home.css trong editor của bạn. Đi tới phần Left Column Styles
và điền quy tắc style:
section#leftColumn {
clear: left;
float: left;
width: 33%;
}
2. Bên trong phần Right Column Styles, điền:
section#rightColumn {
float: left;
width: 67%;
}
Chú ý rằng bạn không áp dụng đặc tính clear cho right column vì bạn muốn nó được hiển
thị cùng dòng cùng với left column.
Right column chứa một danh sách điều hướng nằm ngang chứa bốn vật, mỗi cái chứa
một ảnh và một label trên ảnh. Anne muốn 4 vật được đặt cạnh nhau với width của chúng
được thiết lập thành 25 % width của navigation list. Anne cũng muốn các ảnh trong right
column được hiẻn thị như các khối với width của chúng được thiét lập thành 100 % của
phần tử cha của chúng.
Để hoàn chỉnh right column section:
1. Bên trong phần Right Column Styles, điền các quy tắc style sau vào format của các
ảnh nội dòng và các vật list:
section#rightColumn img {
display: block;
width: 100%;
}
section#rightColumn > nav.horizontalNavigation li {
width: 25%;
}
Chú ý rằng bạn không phải bao gồm một quy tắc style để làm trôi các vật trong danh sách
điều hướng nằm ngang vì bạn đã tạo quy tắc style đó trong học phần trước.
2. Lưu thay đổi của bạn đối với file và sau đó reload lại file pc_home.html trong trình
duyệt của bạn.
