Cách hiển thị các hộp cạnh nhau trong HTML

Trước đây, nhiều trang web đã sử dụng các bảng HTML để bố trí các trang vì phương pháp này tạo ra kết quả đáng tin cậy nhất quán trong các trình duyệt Web cũ hơn. Đây không phải là một giải pháp lý tưởng, vì các bảng thực sự có nghĩa là để hiển thị dữ liệu dạng bảng hơn là bố trí các trang. Sử dụng bảng cũng có nghĩa là bố cục được mã hóa cứng vào trang, khiến cho việc cập nhật trang web tốn nhiều thời gian hơn. Cascading Style Sheets giới thiệu thuộc tính "float", cho phép các nhà thiết kế di chuyển các yếu tố sang trái hoặc phải. Điều này cho phép kiểm soát nhiều hơn trên trang và có thêm lợi thế là giữ bố cục trang web tách biệt với nội dung.

Mở trình soạn thảo văn bản hoặc trình soạn thảo HTML và tạo một tài liệu HTML mới.

Thêm mã sau vào thân trang:

Đây là văn bản trong div đầu tiên Đây là văn bản trong div thứ hai

Lưu trang và mở nó trong trình duyệt Web của bạn. Bạn sẽ thấy rằng nội dung trong div thứ hai được hiển thị dưới nội dung trong div đầu tiên.

Chèn mã CSS sau vào phần tài liệu HTML của bạn:

Lưu trang và làm mới trong trình duyệt của bạn để hiển thị các thay đổi. Quy tắc CSS nhắm mục tiêu cả hai div được lồng trong div div myContainer. Thuộc tính của phao nổi tiếng Nhật báo cho trình duyệt thả các div sang bên trái - bạn có thể thay đổi giá trị float sang bên phải, để chuyển các div sang cạnh phải của div chứa. Các div được đặt ở độ rộng cố định 300 pixel và có viền đen 1 pixel để bố cục dễ nhìn hơn. Trong trình duyệt của bạn, bạn sẽ thấy các hộp hiện được hiển thị cạnh nhau.

Thêm một div thứ ba vào phần thân trang, bên ngoài div div myContainer 'như hình bên dưới:

Đây là văn bản trong div thứ nhất Đây là văn bản trong div thứ hai Đây là văn bản trong div thứ ba

Lưu trang và tải lại trong trình duyệt của bạn. Bạn sẽ thấy div thứ ba hiển thị bên cạnh div thứ nhất và thứ hai, mặc dù nó chưa được thả nổi. Điều này xảy ra vì các phần tử HTML còn lại chảy xung quanh các phần tử nổi. Đây có thể là hành vi mong muốn trong một số trường hợp, nhưng trong ví dụ này, chúng tôi muốn div thứ ba hiển thị dưới các div nổi để tạo chân trang.

Chèn quy tắc sau vào phần kiểu trong phần đầu của trang:

myFooter {

clear: both;

}

Điều này nhắm mục tiêu div div myFooter thứ ba và yêu cầu trình duyệt ngừng float và hiển thị các phần tử HTML tiếp theo bên dưới div div myContainer. Lưu và làm mới trang. Bạn sẽ thấy rằng phần chân trang được tạo bởi div thứ ba hiện được hiển thị bên dưới các div nổi.