Làm thế nào để bạn chia một trang html thành hai cột?

Xin lưu ý. Đây là một tính năng nâng cao. Việc triển khai các cột trên trang web của bạn sẽ yêu cầu một số kỹ năng kỹ thuật của bạn hoặc thời gian với một nhà tư vấn được trả tiền. Chi tiết bổ sung bên dưới

"Tính năng nâng cao" nghĩa là gì?

Khi chúng tôi nói nâng cao, chúng tôi đang đề cập đến thực tế là người dùng sẽ cần một số kiến ​​thức cơ bản về HTML. Nếu bạn không ngại đi sâu vào mã nguồn của trang hoặc thêm một hoặc hai dòng CSS, bạn sẽ ổn thôi. Chỉ cần dành thời gian của bạn làm việc thông qua tài liệu này

Chia nội dung thành hai cột có thể được thực hiện bằng cách kết hợp mã "div" vào vùng nội dung.  

Sử dụng phổ biến

Các cột có thể hữu ích để làm cho nội dung trang dễ hiểu hơn đối với người đọc. Các cột cũng có thể tạo ra sự cạnh tranh về nội dung, vì vậy điều quan trọng là phải sử dụng các cột một cách chiến lược

• Hiển thị danh sách diễn giả, người đoạt giải, nhà tài trợ, v.v. bằng hình ảnh và văn bản

• Cách chia 8-4 rất phù hợp để trình bày bản sao ở bên trái và danh sách các mục (nghĩ về các tổng thống trước đây, ngày quan trọng, liên kết, v.v.) ở bên phải

• Trình bày số liệu thống kê hoặc thông tin - lưới cách điệu là một cách tuyệt vời để hiển thị một số hoặc biểu tượng với bản sao ngắn

Thêm một Div

Bởi vì trang web của bạn dựa trên cái được gọi là khung Twitter Bootstrap, nó sử dụng "lưới" gồm 12. Bạn có thể coi đây chỉ là tổng chiều rộng của các cột của mình.

Vì vậy, để đạt được hai cột, hãy thử sử dụng 6 và 6 cho hai cột bằng nhau hoặc 8 và 4 nếu bạn muốn cột bên trái rộng hơn cột bên phải. Để đơn giản, chỉ cần đảm bảo rằng các cột của bạn cộng lại tối đa 12.

• Dành cho người dùng nâng cao. Để biết thêm các kết hợp lưới tùy chỉnh, hãy truy cập trang web của Bootstrap tại http. //getbootstrap. com/2. 3. 2/ giàn giáo. html

Để thêm một div vào trang của bạn

1. Bắt đầu bằng cách điều hướng đến trang trên giao diện người dùng và mở Mã nguồn

2. Tìm nội dung cần nhập trong lưới và sao chép/dán mã bên dưới vào phần đó, thay thế "NỘI DUNG BẬT. " văn bản với nội dung thực tế của bạn

Mã cho 2 cột (với cột bên trái rộng hơn bên phải)

Mã cho 4 cột (chiều rộng bằng nhau)

>> Xem phần bên dưới để biết thêm ví dụ về mã (e. g. 3 cột bằng nhau)

Div có phản hồi không?

Câu trả lời ngắn. Đối với hầu hết các phần, có. Bắt một chút kỹ thuật. Bootstrap được xây dựng cho các trang web phản hồi, do đó, nó thường sẽ xử lý phản hồi cho bạn. Độ rộng của cột sẽ dựa trên tỷ lệ phần trăm và các div sẽ tự động xếp chồng cho thiết bị di động. Điều đó nói rằng, nếu có nhiều định dạng đặc biệt trong div của bạn, bạn có thể ghi đè khả năng phản hồi đó. Do đó, luôn luôn nên kiểm tra công việc của bạn tại tất cả các điểm ngắt, bao gồm cả thiết bị di động.  

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp chia div thành 2 cột trong HTML, tất cả chúng ta đều biết rằng chúng ta có thể chia trang html thành hai phần theo chiều dọc cũng như hai phần theo chiều ngang

Nhưng ngày nay, khái niệm của chúng tôi là giải quyết vấn đề làm thế nào chúng ta có thể chia hoặc tách một div thành hai cột trong html

Ví dụ: chúng tôi muốn nói rằng có thể có một div cha và bên dưới div này, cần có hai con đóng vai trò là hai cột. Bây giờ, hãy cho chúng tôi hiểu làm thế nào chúng tôi có thể chia một div thành hai cột trong html

Hướng dẫn từng bước về cách chia một div thành 2 cột trong HTML. -

Bây giờ, không lãng phí thêm thời gian. Hãy để chúng tôi hiểu ví dụ được đưa ra bên dưới, trong đó trước tiên chúng tôi sẽ tạo một div là div chính và bao gồm toàn bộ trang web

Và bên dưới hai div nữa được sắp xếp theo chiều dọc và bên dưới bất kỳ div nào trong số này, hai div nữa. Chúng tôi hy vọng rằng nó có vẻ phức tạp hơn. Vì vậy, hãy để chúng tôi hiểu ví dụ hoặc nói mã html ngay bây giờ

      
        
           ending tags respectively.
Thirdly,  tag is used to define the webpage body. All the contents to show on website are written here.
Ở đây, như chúng tôi muốn nói rằng chúng tôi không tạo ra gì đặc biệt. Chúng tôi tạo một thẻ div chính và bên dưới hai thẻ này nữa và lặp lại lần nữa
Bây giờ, điều chính là xác định kích thước và việc sử dụng thuộc tính float với giá trị còn lại. Trong khi đó, kích thước là lời giải thích về chiều rộng và chiều cao. Bạn phải tạo hai con có tổng chiều rộng bằng chiều rộng của div cha
At last, the  and  tags are closed with  and  respectively.
Sự kết luận. -
Tóm lại, chúng tôi có thể nói rằng với sự trợ giúp của bài viết này, bạn có thể chia một div thành hai cột trong html, trong phần tiếp theo, chúng tôi sẽ chỉ cho bạn cách bạn có thể chia một div thành hai hàng trong html