Hướng dẫn how do i split a page horizontally and vertically in html? - làm cách nào để chia trang theo chiều ngang và chiều dọc trong html?

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; John Doe & nbsp; & nbsp; & nbsp; Một số văn bản ở đây quá. & Nbsp;
 

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Jane Flex & nbsp; & nbsp; & nbsp; Một số văn bản. & Nbsp;
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; John Doe & nbsp; & nbsp; & nbsp; Một số văn bản ở đây quá. & Nbsp;
.left {
  left: 0;
  background-color: #111;
}

Bước 2] Thêm CSS:
.right {
  right: 0;
  background-color: red;
}

/ * Chia màn hình trong một nửa */. Split {& nbsp; Chiều cao: 100%; & nbsp; chiều rộng: 50%; & nbsp; Vị trí: Đã sửa; & nbsp; Z-index: 1; & nbsp; Top: 0; & nbsp; Overflow-x: ẩn; & nbsp; Padding-Top: 20px;}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate[-50%, -50%];
  text-align: center;
}

/ * Kiểm soát phía bên trái */. Trái {& nbsp; trái: 0; & nbsp; màu nền: #111;}
.centered img {
  width: 150px;
  border-radius: 50%;
}

Hãy tự mình thử »

Cập nhật lần cuối: 15 tháng 4 năm 2022

Trong - HTML

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp về cách chia trang HTML thành hai phần theo chiều ngang, tất cả chúng tôi đều biết rằng chúng tôi có thể chia trang HTML thành các phần dọc cũng như các 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 đề phân chia trang HTML thành hai phần ngang.

Điều này có thể được thực hiện với sự trợ giúp của nhiều phương pháp khác nhau, nhưng mục tiêu của chúng tôi là giúp bạn giải quyết vấn đề một cách chuyên nghiệp. Vì vậy, hôm nay chúng tôi sẽ cho bạn thấy rằng cách chúng tôi có thể chia trang HTML thành hai phần theo chiều ngang.

Hướng dẫn từng bước về cách chia trang HTML thành hai phần theo chiều ngang:-

Như, không lãng phí nhiều thời gian hơn. Điều này có thể được thực hiện với sự trợ giúp của thẻ div và thẻ con của nó được đặt tên là thẻ phần. Nhưng chủ yếu là thẻ phân chia được sử dụng cho công việc này.

Vì vậy, hãy chuyên nghiệp, chúng tôi cũng dạy bạn cách chia trang HTML theo chiều ngang bằng cách sử dụng các thẻ phân chia. Nếu bạn muốn biết về phân chia dọc, thì chúng tôi đã xuất bản một bài viết về chủ đề này. Bạn có thể đi qua trang đó để tham khảo.

      
        
           Title of the document


     

        

  this is first division that is horizontally aligned
        
        

  this is second division that is horizontally aligned
        
    

      

1. Đầu tiên, chúng tôi viết mà chúng tôi đã sử dụng như một hướng dẫn cho trình duyệt web về phiên bản mà tệp HTML được viết.
2. Thứ hai, thẻ được sử dụng để chỉ ra sự khởi đầu của tài liệu HTML.
3. Như trên thẻ bây giờ được sử dụng để chứa thông tin về trang web. Trong thẻ này, thẻ được sử dụng giúp chúng tôi chỉ định tiêu đề trang web. Cả hai và thẻ đều được ghép các thẻ. Vì vậy, cả có và kết thúc thẻ tương ứng.
4. Thứ ba, TAG được sử dụng để xác định thân trang web. Tất cả các nội dung để hiển thị trên trang web được viết ở đây.
5. Trong thẻ cơ thể, ở đây trước tiên chúng tôi tạo một thẻ div với một số chiều cao và chiều rộng, trong khi màu nền là sự lựa chọn của bạn.
6. Bên trong Div chính này, chúng tôi tạo thêm hai thẻ Div. Và chiều rộng của chúng phải giống với chiều rộng của Div chính, nhưng trong trường hợp chiều cao, bạn phải cung cấp cho chúng khác nhau nhưng ít hơn Div chính.
7. Hãy nhớ rằng tổng chiều cao của các thẻ div bên trong bằng chiều cao của div chính.
8. Như bạn thấy trên trình duyệt, trang web được chia thành hai bộ phận, với chiều cao bạn đã chỉ định.
9. Cuối cùng, các thẻ được đóng lại và tương ứng.

Sự kết luận :-

Để kết luận, chúng tôi có thể nói rằng sau khi đọc bài viết này, chúng tôi có thể chia trang HTML theo chiều ngang bằng cách sử dụng thẻ phân chia và trong phiên tiếp theo, chúng tôi cũng sẽ giúp bạn hiểu cách bạn có thể phân chia trang web theo chiều ngang với sự trợ giúp của thẻ và thẻ khung hình .

Tôi hy vọng hướng dẫn này về cách chia trang HTML thành hai phần theo chiều ngang giúp bạn.