Div HTML cột

Bố cục ba cột HTML có thể cực kỳ hữu ích khi bạn đang làm việc trên một dự án yêu cầu phân chia nội dung.

Nội dung chính Show

Cách tạo 3 cột trong HTML
Using the HTML Element
– Thêm Thuộc tính CSS vào Bố cục Cột HTML 3 của bạn
– Tạo ba cột không bằng nhau bằng thuộc tính CSS
– Tạo bố cục cột đáp ứng
Sử dụng Phương pháp bố cục nhiều cột CSS
– Sử dụng Thuộc tính đếm cột
– Sử dụng thuộc tính Column-Gap
– Sử dụng thuộc tính Column-Rule-Style
– Sử dụng thuộc tính Column-rule-Width
– Sử dụng thuộc tính Column-rule-Color
– Sử dụng Thuộc tính quy tắc cột
Suy nghĩ cuối cùng
Làm cách nào để chia div thành 2 hàng?
Làm cách nào để chia div trong HTML?
Làm cách nào để đặt 3 div trong một hàng?
Làm cách nào để tạo 4 div cạnh nhau?

Trong bài viết này, chúng ta sẽ khám phá từng bước hai phương pháp để tạo 3 cột trong tài liệu HTML và bằng cách sử dụng các ví dụ thích hợp. Hãy tiếp tục đọc bài viết và khi hoàn thành, bạn sẽ sẵn sàng đưa mã HTML 3 cột vào dự án tiếp theo của mình

nội dung

Cách tạo 3 cột trong HTML

Như chúng tôi đã nói trước đây, việc tạo một trang web 3 cột cho phép bạn chia các yếu tố và nội dung thành các phần hợp lý. Ví dụ: rất hữu ích khi sử dụng chúng khi bạn viết công thức món ăn, chia động vật thành các nhóm hoặc viết hướng dẫn cách thực hiện yêu cầu ba bước khác nhau

Nếu bạn muốn thêm các cột trong tài liệu HTML, có hai phương pháp cơ bản mà bạn có thể sử dụng, tất cả đều tùy theo sở thích cá nhân của bạn. Hai phương pháp chúng ta đang nói đến là

Using the HTML
element
Sử dụng bố cục nhiều cột CSS

Khi sử dụng phương thức đầu tiên, cũng cần lưu ý rằng việc bao gồm phần tử HTML

sẽ không đủ. Bạn phải bao gồm các thuộc tính CSS nhất định để thay đổi và tạo kiểu cho các cột của mình. Phương pháp thứ hai cũng yêu cầu sử dụng thuộc tính div CSS, tuy nhiên, thay vì thêm ba thành phần khác nhau, bạn chỉ sử dụng thuộc tính đếm cột và thêm số lượng cột.

Trong phần sau của bài viết này, chúng tôi sẽ giải thích và làm ví dụ cho từng phương pháp riêng lẻ

Using the HTML Element

Để tạo mẫu HTML 3 cột, trước tiên, bạn sẽ tạo một phần tử chính

, bạn phải bao gồm một lớp có thuộc tính “hàng”,< . Bây giờ, bạn đã sẵn sàng chia hàng này thành các cột bằng cách bao gồm ba phần tử which is going to tell your browser to take up the entire space for this row on the web page. Now, you are ready to divide this row into columns by including three

elements containing the class with a “column” attribute.

Chúng ta hãy xem ví dụ sau đây trong thực tế

This is where you include the content in the first column.

This is where you include the content in the second column.

This is where you include the content in the third column.

Việc thêm loại nội dung bên trong các cột hoàn toàn tùy thuộc vào bạn. Bằng cách sử dụng mã như vậy, bạn đã tạo thành công cú pháp bố cục ba cột đơn giản nhưng chính xác cho trang web của mình. Từ giờ trở đi, bạn phải thêm một số thuộc tính CSS nhất định, vì chúng tôi sẽ chỉ cho bạn trong bước tiếp theo

– Thêm Thuộc tính CSS vào Bố cục Cột HTML 3 của bạn

Mặc dù có thể tạo các cột chỉ bằng các phần tử HTML, nhưng chúng tôi khuyên bạn nên bao gồm một số thuộc tính CSS cơ bản. Chúng giúp bạn tạo kiểu cho các cột và có rất nhiều tùy chọn khác nhau mà bạn có thể chọn. Chúng tôi sẽ cho bạn thấy một ví dụ trong đó chúng tôi đã chia đều các cột và mỗi cột sẽ chiếm một phần ba hàng

Hãy quan sát ví dụ sau

.column {
phao. trái;
chiều rộng. 33. 33%;
}
/* Số float sau khi các cột bị xóa */
. hàng ngang. sau {
nội dung. “”;
hiển thị. bảng;
xóa. cả hai;
}

By simply including several basic CSS properties, you have assigned certain values to the three HTML

elements. However, this is not the end because there are other things you can change in your properties to make different columns.

– Tạo ba cột không bằng nhau bằng thuộc tính CSS

Các cột không phải lúc nào cũng bằng nhau. Đôi khi bạn muốn tạo các cột có kích thước khác nhau và điều này có thể dễ dàng đạt được bằng cách sử dụng các thuộc tính CSS nhất định. Điều này thường được thực hiện khi các cột có tầm quan trọng khác nhau hoặc chúng chứa lượng nội dung khác nhau. Quá trình này đơn giản và chỉ yêu cầu một thuộc tính cho mỗi lớp

Hãy xem một ví dụ ngắn sau đây

.column {
phao. trái;
}
. đúng,. chiều rộng {
trái. 25%;
}
. {
chiều rộng ở giữa. 50%;
}

Đây là một trong những cách dễ nhất để bạn có thể tạo các cột không bằng nhau. Tất nhiên, các giá trị có thể được thay đổi theo nhu cầu của bạn nhưng ví dụ này chỉ cho thấy việc tạo chúng đơn giản như thế nào. Chúng ta sẽ xem xét một cách nữa để bạn có thể tạo bố cục đáp ứng 3 cột

– Tạo bố cục cột đáp ứng

Lý do tại sao loại cột này rất quan trọng là mọi người sử dụng màn hình có kích thước khác nhau khi xem trang web. Một số màn hình nhỏ hơn, một số màn hình lớn hơn và bạn phải tạo một tài liệu HTML sẽ đáp ứng nhu cầu của mọi người. Đây là lý do tại sao việc tạo bố cục 3 cột đáp ứng là điều cần thiết. Chỉ cần một chút nỗ lực nhưng nó rất xứng đáng

Ví dụ sau đây sẽ cho chúng ta thấy việc tạo nó dễ dàng như thế nào

/* Đây là cái mà chúng tôi gọi là “bố cục đáp ứng” – trong trường hợp màn hình rộng dưới 750px, hãy đặt ba cột chồng lên nhau và xếp chồng lên nhau, thay vì đặt chúng cạnh nhau . 750px) {
@media screen and (max-width: 750px) {
. cột {
chiều rộng. 100%;
}
}

Như đã giải thích trong ví dụ, nếu chiều rộng màn hình của bạn nhỏ hơn 750px, các cột sẽ được hiển thị chồng lên nhau. Điều này hữu ích khi mọi người sử dụng điện thoại di động để mở một trang web. Những người dùng này sẽ dễ dàng điều hướng trên trang web hơn nhiều

Sử dụng Phương pháp bố cục nhiều cột CSS

Phương pháp tạo cột thứ hai mà chúng ta sẽ thảo luận trong bài viết này là sử dụng các thuộc tính CSS khác nhau. Cách tốt nhất để tạo kiểu cho bất kỳ nội dung nào trong tài liệu HTML của bạn được thực hiện bằng CSS. Các tùy chọn là vô tận, và bạn có rất nhiều lợi ích. Chúng ta sẽ xem xét các thuộc tính khác nhau mà bạn có thể sử dụng để tạo bố cục 3 cột như vậy

– Sử dụng Thuộc tính đếm cột

Đây là thuộc tính đầu tiên và quan trọng nhất mà bạn sẽ cần. Thuộc tính này cho phép bạn đặt số lượng cột mà bạn muốn chia phần tử của mình thành

Chúng ta hãy xem xét một ví dụ ngắn

div {
số cột. 3;
}

Như bạn thấy, cú pháp rất dễ nhớ. Chỉ cần tạo một phần tử

bên trong tài liệu HTML của bạn và bằng cách sử dụng cú pháp này, bạn sẽ chia nội dung thành ba cột.

– Sử dụng thuộc tính Column-Gap

Chỉ chia nội dung thành ba cột là không đủ. Có nhiều cách khác để bạn có thể tạo kiểu cho nội dung và cách phổ biến nhất là sử dụng thuộc tính column-gap . Điều này cho phép bạn thay đổi giá trị mặc định của khoảng cách giữa các cột.

Ví dụ sau đây sẽ cho chúng ta thấy việc sử dụng thuộc tính này dễ dàng như thế nào

div {
khoảng cách cột. 20px;
}

Một lần nữa, tạo một phần tử div CSS và bao gồm thuộc tính này bên trong. Đặt giá trị của khoảng cách theo nhu cầu và sở thích của bạn

– Sử dụng thuộc tính Column-Rule-Style

Bạn nên thông báo cho trình duyệt của mình cách hiển thị quy tắc giữa các cột. Cách dễ nhất để làm điều này là sử dụng thuộc tính column-rule-style

Hãy quan sát ví dụ sau

div {
column-rule-style. ổn định;
}

Bao gồm thuộc tính CSS này trong tài liệu HTML của bạn sẽ tạo ra một đường liền nét xung quanh mỗi cột. Đó là một cách tuyệt vời để thấy rằng các cột được phân tách bằng một dòng

– Sử dụng thuộc tính Column-rule-Width

Nếu bạn tạo một đường như vậy, bạn nên cho biết chiều rộng là bao nhiêu. Đây là nơi bạn sử dụng thuộc tính column-rule-width, thuộc tính này đặt chiều rộng theo đầu vào của bạn

Ví dụ sau hiển thị chiều rộng quy tắc 5px

div {
column-rule-width. 5px;
}

Bởi vì thuộc tính này rất đơn giản nên hãy luôn đảm bảo bao gồm nó bất cứ khi nào bạn sử dụng thuộc tính kiểu cột-quy tắc

– Sử dụng thuộc tính Column-rule-Color

Bạn có thể thay đổi một điều nữa trong quy tắc cột, đó là màu sắc. Đối với chức năng này, bạn sẽ sử dụng thuộc tính column-rule-color và chỉ cần viết màu bạn muốn sử dụng.

Chúng ta hãy xem ví dụ sau

div {
column-rule-color. cam;
}

Dựa trên cú pháp chúng tôi đã sử dụng trong ví dụ này, màu của quy tắc cột của bạn sẽ là màu cam. Có một thuộc tính nữa bạn nên biết về

– Sử dụng Thuộc tính quy tắc cột

Nếu bạn cảm thấy ba bước trước quá phức tạp, thì có một cách giúp mọi việc trở nên dễ dàng hơn. Cách tốt nhất để thay thế tất cả các quy tắc cột mà chúng tôi đã đề cập trước đó là chỉ cần sử dụng thuộc tính quy tắc cột. Điều này cho phép bạn bao gồm loại, kích thước và màu sắc cùng một lúc.

Hãy xem kỹ ví dụ sau

div {
quy tắc cột. Màu cam đặc 5px;
}

Như bạn có thể thấy, tất cả các thuộc tính trước đó được hợp nhất thành một. Chỉ cần bao gồm một khoảng trắng giữa các từ và bạn sẽ có cú pháp đúng. Điều này có thể giúp bạn tiết kiệm thời gian và công sức

Suy nghĩ cuối cùng

Tạo bố cục cột HTML 3 là một chức năng rất hữu ích vì nó cho phép bạn tách nội dung thành ba cột khác nhau và có hai phương pháp bạn có thể sử dụng để thực hiện việc này. Hãy xem những gì chúng ta đã thảo luận trong bài viết này

Bố cục cột HTML 3 cho phép bạn nhóm các nội dung nhất định
The first method uses the HTML
element
Phương pháp thứ hai sử dụng bố cục nhiều cột CSS
There are different CSS attributes you can include for your
elements
Bạn có thể tạo bố cục 3 cột đáp ứng bằng JavaScript
Tạo và định kiểu bố cục cột bằng các thuộc tính CSS thật dễ dàng

Sau khi đọc kỹ hướng dẫn này, bạn đã sẵn sàng bắt đầu triển khai chức năng này vào dự án HTML tiếp theo của mình. Đừng bao giờ ngại thử nghiệm các yếu tố và thuộc tính, và ngay cả khi mọi thứ không diễn ra theo kế hoạch, đừng bỏ cuộc và quay lại với hướng dẫn của chúng tôi

Đánh giá bài viết này

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL

Làm cách nào để chia div thành 2 hàng?

Cách tạo DIV kéo dài 2 hàng của lưới với sự trợ giúp của CSS. Cách tiếp cận 1. Đầu tiên lấy chiều cao của DIV bên ngoài của ID('outer'). Chúng tôi biết chiều cao của phần tử bên ngoài giờ đây có thể đạt được thiết kế bằng cách sử dụng CSS Flexbox với hướng uốn. cột và flex-quấn. bọc .

Làm cách nào để chia div trong HTML?

Thẻ div được gọi là thẻ Division. Thẻ div được sử dụng trong HTML để phân chia nội dung trong trang web như (văn bản, hình ảnh, đầu trang, chân trang, thanh điều hướng, v.v.). Thẻ div có cả thẻ mở()))))))))))))) và bắt buộc phải đóng thẻ.

Làm cách nào để đặt 3 div trong một hàng?

Có thể đặt ba hoặc nhiều div khác nhau cạnh nhau bằng cách sử dụng CSS. Sử dụng thuộc tính CSS để đặt chiều cao và chiều rộng của div và sử dụng thuộc tính display để đặt div ở định dạng cạnh nhau . trôi nổi. trái; .

Làm cách nào để tạo 4 div cạnh nhau?

Thêm CSS .

Sử dụng thuộc tính float để xác định các phần tử sẽ được đặt ở phía nào của vùng chứa. .

Bạn có thể chọn màu nền bằng thuộc tính background-color. .

Set the size of your

with the width and height properties..

Đặt vị trí cho tiêu đề của bạn bằng thuộc tính text-align

programming html

Div HTML cột

Cách tạo 3 cột trong HTML

Using the HTML Element

– Thêm Thuộc tính CSS vào Bố cục Cột HTML 3 của bạn

– Tạo ba cột không bằng nhau bằng thuộc tính CSS

– Tạo bố cục cột đáp ứng

Sử dụng Phương pháp bố cục nhiều cột CSS

– Sử dụng Thuộc tính đếm cột

– Sử dụng thuộc tính Column-Gap

– Sử dụng thuộc tính Column-Rule-Style

– Sử dụng thuộc tính Column-rule-Width

– Sử dụng thuộc tính Column-rule-Color

– Sử dụng Thuộc tính quy tắc cột

Suy nghĩ cuối cùng

Làm cách nào để chia div thành 2 hàng?

Làm cách nào để chia div trong HTML?

Làm cách nào để đặt 3 div trong một hàng?

Làm cách nào để tạo 4 div cạnh nhau?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội