Làm cách nào để làm cho các phần tử xuất hiện cạnh nhau trong css?

Trong ví dụ này, chúng tôi đã sử dụng phần đệm CSS, thuộc tính lề. Thuộc tính đệm tạo không gian đệm trên tất cả các mặt của nội dung phần tử. Thuộc tính lề trong CSS tạo khoảng trống xung quanh phần tử. Ngoài ra, bạn có thể chọn bất kỳ màu nào bạn muốn từ bộ chọn màu cho văn bản

  
    Title of the document
    
  
  
    
Flex property example
    

      
GREEN
      
BLUE
      
GRAY
      
PINK
    

  

Ở đây, chúng tôi đã sử dụng thuộc tính hiển thị với giá trị "flex". Thuộc tính hiển thị xác định loại hộp được sử dụng cho phần tử HTML. Giá trị "flex" hiển thị một phần tử dưới dạng bộ chứa flex cấp khối

  
    Title of the document
    
  
  
    
Flex property example
    

      
GREEN
      
BLUE
      
GRAY
      
PINK
      
YELLOW
    

Trong ví dụ trên, chúng tôi đã sử dụng thuộc tính hiển thị với giá trị "khối nội tuyến", hiển thị một phần tử dưới dạng bộ chứa khối cấp độ nội tuyến. Ngoài ra, chúng tôi đã sử dụng thuộc tính font-family cho phép tạo danh sách ưu tiên các tên họ phông chữ và/hoặc họ chung cho phần tử được chọn

Tôi đã thêm đường viền và phần đệm vào div để bạn có thể dễ dàng nhìn thấy chính xác điều gì đang diễn ra hơn. Đường viền màu trắng đặc dày hơn ở bên ngoài là .float-container div, có 20px phần đệm

Sau đó, mỗi phần tử .float-child có đường viền màu đỏ mỏng hơn và thêm một số phần đệm. Sau đó, các khối màu thực tế là phần tử con của phần tử .float-child. (Bạn sẽ thấy lý do tại sao trong một chút. )

Để đặt các div cạnh nhau, chúng tôi đang sử dụng thuộc tính 

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}  

3 để di chuyển từng phần tử .float-child sang bên trái

Vì cả hai đều nổi ở bên trái nên chúng sẽ hiển thị cạnh nhau nếu có đủ không gian cho cả hai. Chúng phù hợp vì chúng ta có hai div .float-child, mỗi div có 50% chiều rộng

Và khoảng cách giữa các div được tạo bằng cách thêm phần đệm vào mỗi .float-child div, sau đó chứa các khối màu

Thêm khoảng cách giữa các cột bằng cách lồng từng cột vào div bên ngoài

Các khối màu cần có một div bên ngoài (.float-child) để thêm không gian và cũng để cả hai khối nằm cạnh nhau

Chà, điều gì sẽ xảy ra nếu chúng ta chỉ có các div .float-child không có phần đệm và thay vào đó cố gắng thêm khoảng trống bằng cách đặt một giá trị 

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}  

9 vào khối đầu tiên như thế này?

HTML

  

    Float Column 1
  
  
  

    Float Column 2
  
  

CSS

.float-child.green {
    margin-right: 20px;
}

Trong trường hợp này, cả hai phần tử .float-child sẽ chiếm 50% tổng chiều rộng. Nhưng phần tử màu xanh đầu tiên cũng sẽ có lề là 20px

Điều này có nghĩa là cả hai khối sẽ chiếm 50% + 20px + 50% chiều rộng. Đây sẽ là 20px lớn hơn 100% chiều rộng, nghĩa là không có đủ chỗ cho cả hai cạnh nhau

Sau đó, khối màu xanh lam thứ hai sẽ quấn sang hàng tiếp theo bên dưới khối đầu tiên và trôi về bên trái ở đó

Bạn có thể thử điều chỉnh độ rộng sao cho chúng là 48% hoặc một số khác nhỏ hơn 50% để vừa với chúng. Nhưng nó sẽ không chính xác

Đó là lý do tại sao cá nhân tôi thích gói các khối trong một div bên ngoài được đặt ở độ rộng 50%, với phần đệm để thêm khoảng cách giữa các div

Ngày nay, việc sử dụng các phương thức khác, mới hơn trong CSS để đặt các div cạnh nhau dễ dàng hơn thay vì sử dụng float

Hãy xem xét một trong những điều này. phương pháp flexbox

Phương pháp Flexbox

Với flexbox, chúng ta có thể sử dụng một cách trực quan hơn để căn chỉnh hai phần tử div của mình

HTML

  

    Flex Column 1
  
  
  

    Flex Column 2
  
  

CSS

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

Với flexbox, chúng ta đã đặt 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

1 trên phần tử cha 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

2. Cái này bật flexbox

Sau đó, trong mỗi phần tử 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

3, chúng tôi đang thiết lập 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

4. Con số này giống như một tỷ lệ so sánh độ rộng của từng phần tử con trong phần tử flex gốc

Vì chúng giống nhau nên không gian có sẵn sẽ được chia đều. Và vì chúng ta có hai phần tử con nên mỗi phần tử sẽ chiếm 50%

Đây là mã kết quả sẽ trông như thế nào

Thêm khoảng cách giữa các div bằng cách sử dụng lề và nó sẽ vẫn vừa

Lưu ý rằng chúng ta đã thêm khoảng trống bằng cách thêm 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

5 vào chỉ phần tử 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

3 đầu tiên. Tuy nhiên, flexbox đủ thông minh để cân nhắc thêm 20px đó khi chia phần còn lại của chiều rộng có sẵn

Điều này có nghĩa là bạn có thể thêm không gian với lề mà không cần phải tính toán chính xác các pixel. Flexbox sẽ phù hợp với nội dung cho bạn

Đây là một lý do lớn mà tôi yêu thích flexbox

Tuy nhiên, nếu bạn có nhiều phần tử mà bạn muốn bố trí trong một lưới đáp ứng, thì không phải lúc nào bạn cũng biết mình cần thêm khoảng cách đó vào đâu giữa các phần tử

Trong trường hợp của chúng tôi, nếu chúng tôi muốn xếp chồng hai div này dưới cái kia cho thiết bị di động, chúng tôi sẽ phải loại bỏ thuộc tính

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}  

9 cho chiều rộng của thiết bị di động

Hoặc bạn có thể thêm một phần tử bên ngoài bổ sung cộng với phần đệm cho mỗi phần tử 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

3, tương tự như những gì chúng ta đã làm với phương thức float

Nó không trực quan 100%, nhưng nó vẫn hoạt động. Nếu bạn cần tạo bố cục đáp ứng phức tạp hơn với flexbox, bạn sẽ cần ghi nhớ điều này

Bây giờ chúng ta hãy xem phương pháp mới nhất mà bạn có thể sử dụng để đặt các div cạnh nhau. lưới CSS

Phương pháp lưới CSS

Và đây là cách bạn có thể đặt hai div cạnh nhau, sử dụng lưới CSS

HTML

    

        Grid Column 1
    

    

        Grid Column 2
    
  

CSS

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

Và đây là mã sẽ trông như thế nào

Một thay đổi lớn với lưới là trước tiên bạn xác định mẫu lưới sẽ trông như thế nào. Có nghĩa là bạn muốn có bao nhiêu cột và/hoặc hàng trong bố cục của mình

Trong trường hợp của chúng tôi, chúng tôi muốn hai cột có chiều rộng bằng nhau. Vì vậy, trong phần tử cha 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

9, chúng tôi bật lưới với 

.float-child.green {
    margin-right: 20px;
}

0. Sau đó, chúng tôi thêm vào số lượng cột mà chúng tôi muốn trong bố cục của mình với thuộc tính 

.float-child.green {
    margin-right: 20px;
}

1

Chúng tôi muốn hai cột có chiều rộng bằng nhau, vì vậy chúng tôi đặt nó thành 

.float-child.green {
    margin-right: 20px;
}

2. Điều này yêu cầu trình duyệt tạo bố cục hai cột và mỗi cột chiếm 

.float-child.green {
    margin-right: 20px;
}

3 (fr = đơn vị phân số) không gian

Đơn vị fr là tỷ lệ của mỗi cột so với cột khác, tương tự như quy tắc 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

4 mà chúng tôi đã sử dụng trong phương pháp flexbox. Việc đặt các cột thành 

.float-child.green {
    margin-right: 20px;
}

2 có nghĩa là mỗi cột sẽ chiếm cùng một dung lượng

Thêm khoảng cách giữa các mục lưới với thuộc tính grid-gap

Một lợi ích lớn khi sử dụng lưới CSS là bạn không cần sử dụng phần đệm hoặc lề để thêm khoảng cách giữa các mục lưới

Bạn có thể sử dụng 

.float-child.green {
    margin-right: 20px;
}

6 (hoặc 

.float-child.green {
    margin-right: 20px;
}

7 trong các trình duyệt mới hơn) để tự động thêm khoảng trống vào mẫu lưới của mình

Chúng tôi đã đặt 

.float-child.green {
    margin-right: 20px;
}

6 thành 20px, vì vậy, trình duyệt sẽ biết thêm 20px khoảng cách giữa tất cả các mục, cho dù chúng nằm cạnh nhau hay xếp chồng lên nhau

Và bạn có thể nhận thấy rằng tất cả các thuộc tính CSS cho lưới được đặt trên phần tử 

  

    Float Column 1
  
  
  

    Float Column 2
  
  

9 gốc. Chúng tôi thực sự không phải viết bất kỳ CSS nào cho phần tử con 

  

    Flex Column 1
  
  
  

    Flex Column 2
  
  

0