Video và văn bản cạnh nhau html

Một cách khác để sắp xếp các phần tử cạnh nhau là sử dụng float. Đây là một kỹ thuật cũ hơn và có nhiều cuộc thảo luận trên web về việc sử dụng float có còn hữu ích hay không

Tôi có nên sử dụng phao?

Thành thật mà nói, nó phụ thuộc vào dự án của bạn. Nếu tất cả những gì bạn muốn làm là đặt các phần tử cạnh nhau, sử dụng số float sẽ thực hiện thủ thuật. Tuy nhiên, nếu dự án của bạn đang sử dụng một kỹ thuật hiện đại [như Flexbox, Grid hoặc có thể là một khung như Bootstrap, v.v. ] thì sử dụng float có thể không phải là một ý tưởng hay

Cách sử dụng

Bằng cách sử dụng float, bạn có thể định vị các phần tử ở bên trái hoặc bên phải của trang. Không thể căn giữa các phần tử trực tiếp bằng cách chỉ sử dụng số float vì không có giá trị "trung tâm" cho số float, nhưng điều này có thể được thực hiện với các thuộc tính CSS khác

div {
  float: left;
}

Ngoài ra, thuộc tính float sẽ lấy các phần tử ra khỏi luồng tài liệu thông thường. Điều này có thể gây ra tình trạng lộn xộn trên trang của bạn và chuyển phần còn lại của các thành phần bên dưới các thành phần nổi để chúng hiển thị một phần hoặc hoàn toàn không hiển thị

Để ngăn chặn điều này, bạn nên sử dụng thuộc tính rõ ràng ngay sau các phần tử nổi

div {
  clear: both;
}

Bạn cũng có thể xem video hướng dẫn của bài đăng này bên dưới

Cho đến nay chúng ta đã nói về các phương pháp cổ điển để giải quyết vấn đề này. Bây giờ hãy chuyển sang các kỹ thuật nâng cao hơn

CSS cung cấp hai phương thức mới hơn để giải quyết vấn đề căn chỉnh là flexbox và grid. Ưu điểm của việc sử dụng flexbox hoặc grid là chúng mang lại giải pháp rộng hơn, linh hoạt hơn và dễ sử dụng cho bài toán định vị. Tuy nhiên, cả hai kỹ thuật này đều cần hiểu biết nhiều hơn vì chúng có rất nhiều tính năng khác nhau để căn chỉnh, vì vậy trước khi sử dụng flexbox hoặc grid trong dự án của mình, bạn cần có một số hiểu biết về chúng hoặc dự án của bạn phải phù hợp để sử dụng một trong các phương pháp này

Nếu bạn quyết định sử dụng flexbox, trước hết các phần tử phải được bao bọc bởi phần tử cha

  
 1 

  


  
 2 

  
 3 

Sau đó, khi chúng ta gán phần tử cha [vùng chứa] một màn hình. flex, nó sẽ tự động định vị tất cả các phần tử con của nó cạnh nhau

.container {
  display: flex;
}

Ngoài ra, nếu bạn thêm các phần tử con vào thuộc tính flex và cho một số [số 1 chẳng hạn] thì toàn bộ không gian sẽ được chia đều

p {
  flex: 1;
}

Flexbox giúp việc định vị các thành phần bằng CSS dễ dàng hơn rất nhiều nếu bạn hiểu một chút về cách sử dụng nó

Lưới CSS là một cách khác để sắp xếp các phần tử cạnh nhau. Nó có những điểm tương đồng với Flexbox nhưng có các quy tắc và cách thực hiện khác nhau

Trước hết, như chúng ta đã làm trong phương thức flexbox, các phần tử phải nằm trong một thùng chứa cha

  
 1 

  
 2 

  


  
 3 

Sau đó, chúng tôi thay đổi thuộc tính hiển thị của phần tử cha [vùng chứa] thành lưới

.container {
  display: grid;
}

Tiếp theo, chúng ta cần xác định bố cục sẽ như thế nào. Chúng ta có thể quyết định sẽ có bao nhiêu cột và hàng trong bố cục của mình. Giả sử chúng ta muốn ba cột cho ba phần tử, mỗi phần tử được đặt trong một cột và trên cùng một hàng. Để đặt các phần tử cạnh nhau, chúng tôi xác định thuộc tính grid-template-columns và chia đều trường trống bằng cách đặt giá trị 1fr cho mỗi cột

Ghi chú. fr có nghĩa là đơn vị phân số của không gian và tương tự như thuộc tính “flex” của flexbox

Thích bài viết? . Vì Phương tiện không có quảng cáo nên những độc giả yêu thích nền tảng này có thể ủng hộ nó bằng cách trở thành thành viên

Bạn có thể trở thành thành viên của Medium tại đây và có quyền truy cập không giới hạn vào mọi câu chuyện trên Medium. Nếu bạn sử dụng liên kết ngay trên, nó cũng sẽ hỗ trợ tôi với tư cách là một nhà văn, vì tôi sẽ kiếm được một khoản hoa hồng nhỏ từ Medium. Cảm ơn bạn. ]