Chia cột trong HTML/CSS với cách rã DIV
Bài này dành cho các bạn mới làm quen cắt HTML với DIV nhé !
Đây là lỗi thường gặp nhất đối với các bạn mới làm quen với <DIV>
Tạo cột thì dùng float:fleft; hoặc: float: right là được rồi. Nhưng lỗi thường gặp của các bạn mới bắt đầu là giao diện bắt đầu nhảy lung tung khi chia cột xong.
Những lưu ý quan trọng cần nhớ :
– clear: both; Để layout của các bạn không nhảy lung tung khi tạo cột là phải thêm thuộc tính clear: both; sau khi các bạn chia cột xong.
– Khi độ rộng của các cột cộng lại mà lớn hơn <DIV> chứa nó thì cột cuối sẽ tự rớt xuống dòng.
Khi các bạn hiểu đuợc nguyên lý này thì các bạn dể dàng debug lỗi của HTML/CSS
Source đơn giản nhất để tạo 3 cột, các bạn tham khảo.
//Đây là source code HTML và CSS nhé
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.line1 .col1 { float:left; width:300px}
.line1 .col2 { float:left; width:300px}
.line1 .col3 { float:left; width:300px}
.line2 { clear:both; }
–>
</style>
</head>
<body>
<div class=”line1″>
<div class=”col1″>col1</div>
<div class=”col1″>col2</div>
<div class=”col1″>col3</div>
</div>
<div class=”line2″>line 2</div>
</body>
</html>
//Nếu có copy về, vui lòng xem lại các dấu nháy (“). Sửa lại cho đúng cú pháp HTML. Cảm ơn