두 div를 나란히 표시하는 3가지 방법(float, flexbox, CSS 그리드)

다음은 CSS를 사용하여 HTML div 요소를 나란히 배치하는 3가지 방법입니다.

(클릭하면 각 섹션으로 이동)

• 플로트 방식
• 플렉스박스 방식
• CSS 그리드 방식

플로트 메소드

float 메서드에서 다음 HTML 마크업을 사용합니다.

<div class="float-container">

  <div class="float-child">
    <div class="green">Float Column 1</div>
  </div>
  
  <div class="float-child">
    <div class="blue">Float Column 2</div>
  </div>
  
</div>

.float-container .float-child를 모두 포함하는 단순히 부모 요소입니다. 요소.

div를 나란히 가져오기 위해 다음 CSS 규칙을 사용합니다.

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

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

결과 코드는 다음과 같습니다.

div에 테두리와 패딩을 추가하여 진행 상황을 더 쉽게 확인할 수 있습니다. 외부의 두꺼운 실선 흰색 테두리는 .float-container입니다. 20px의 패딩이 있는 div.

그런 다음 각 .float-child 요소에는 더 얇은 빨간색 테두리와 더 많은 패딩이 있습니다. 그러면 실제 색상 블록은 .float-child의 자식 요소입니다. 집단. (이유는 잠시 후에 알게 될 것입니다.)

div를 나란히 배치하려면 float를 사용합니다. 각 .float-child 부동 소수점 속성 요소를 왼쪽으로 이동합니다.

둘 다 왼쪽에 떠 있기 때문에 둘 다 들어갈 충분한 공간이 있으면 나란히 표시됩니다. 두 개의 .float-child가 있기 때문에 적합합니다. div, 각각 너비가 50%입니다.

그리고 div 사이의 공간은 각 .float-child에 패딩을 추가하여 생성됩니다. div에 색상 블록이 포함됩니다.

외부 div의 각 열을 중첩하여 열 사이에 공백 추가

색상 블록에는 외부 div(.float-child ) 공간을 추가하고 두 블록을 나란히 맞추기 위해.

.float-child만 있다면 어떨까요? 패딩 없이 div를 만들고 대신 margin-right를 넣어 공간을 추가하려고 했습니다. 이 같은 첫 번째 블록의 값은?

HTML:

<div class="float-container">

  <div class="float-child green">
    Float Column 1
  </div>
  
  <div class="float-child blue">
    Float Column 2
  </div>
  
</div>

CSS:

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

이 경우 .float-child 요소는 전체 너비의 50%를 차지합니다. 그러나 첫 번째 녹색 요소의 여백도 20px입니다.

이것은 두 블록이 50% + 20px + 50% 너비를 차지함을 의미합니다. 너비가 100%보다 20픽셀 더 크므로 둘 다 나란히 놓을 공간이 충분하지 않습니다.

그러면 두 번째 파란색 블록이 첫 번째 블록 아래의 다음 행으로 줄 바꿈되고 왼쪽에 떠 있습니다.

너비를 조정하여 너비를 48% 또는 50% 미만이 되도록 조정할 수 있습니다. 하지만 정확하지는 않습니다.

그래서 개인적으로 50% 너비로 설정된 외부 div에 블록을 래핑하고 div 사이에 공간을 추가하기 위해 패딩을 사용하는 것을 좋아합니다.

요즘에는 CSS에서 다른 새로운 메서드를 사용하여 float 대신 div를 나란히 배치하는 것이 더 쉽습니다.

다음 중 하나인 flexbox 메서드를 살펴보겠습니다.

플렉스박스 방식

flexbox를 사용하면 두 개의 div 요소를 정렬하는 보다 직관적인 방법을 사용할 수 있습니다.

HTML:

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

CSS:

.flex-container {
    display: flex;
}

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

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

flexbox를 사용하여 display: flex를 설정했습니다. 상위 .flex-container에서 요소. 이렇게 하면 플렉스박스가 켜집니다.

그런 다음 각 .flex-child에서 요소에서 flex: 1을 설정하고 있습니다. . 이 숫자는 부모 플렉스 요소에서 각 자식의 너비를 비교하는 비율과 같습니다.

동일하므로 사용 가능한 공간이 동일하게 분할됩니다. 그리고 두 개의 자식 요소가 있으므로 각각 50%를 차지합니다.

결과 코드는 다음과 같습니다.

여백을 사용하여 div 사이에 공간을 추가하면 여전히 맞을 것입니다!

margin-right: 20px를 추가하여 공간을 추가했습니다. 첫 번째 .flex-child에만 요소. 그러나 flexbox는 사용 가능한 나머지 너비를 나눌 때 추가 20px를 고려할 만큼 충분히 지능적입니다.

즉, 정확한 픽셀을 계산하지 않고도 여백이 있는 공간을 추가할 수 있습니다. Flexbox는 귀하의 콘텐츠에 적합합니다!

이것이 제가 flexbox를 좋아하는 큰 이유 중 하나입니다.

그러나 반응형 그리드에 배치하려는 여러 요소가 있는 경우 요소 사이에 해당 공간을 추가해야 하는 위치를 항상 알 수 없습니다.

우리의 경우 모바일용으로 두 div를 서로 쌓고 싶다면 margin-right를 제거해야 합니다. 모바일 너비에 대한 속성입니다.

또는 각 .flex-child에 대해 추가 외부 요소와 패딩을 추가할 수 있습니다. float 메서드로 수행한 것과 유사한 요소입니다.

100% 직관적이지는 않지만 여전히 작동합니다. flexbox로 더 복잡한 반응형 레이아웃을 만들어야 하는 경우 이 점을 염두에 두어야 합니다.

이제 div를 나란히 배치하는 데 사용할 수 있는 최신 방법인 CSS 그리드를 살펴보겠습니다.

CSS 그리드 방식

CSS 그리드를 사용하여 두 div를 나란히 배치하는 방법은 다음과 같습니다.

HTML:

<div class="grid-container">

    <div class="grid-child purple">
        Grid Column 1
    </div>

    <div class="grid-child green">
        Grid Column 2
    </div>
  
</div>

CSS:

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

코드는 다음과 같습니다.

그리드의 한 가지 큰 변경 사항은 먼저 그리드 템플릿의 모양을 결정한다는 것입니다. 레이아웃에 원하는 열 및/또는 행 수를 의미합니다.

우리의 경우 너비가 같은 두 개의 열이 필요합니다. 따라서 상위 .grid-container에서 요소에서 display: grid로 그리드를 켭니다. . 그런 다음 grid-template-columns를 사용하여 레이아웃에 원하는 열 수를 추가합니다. 재산.

너비가 같은 두 개의 열이 필요하므로 1fr 1fr로 설정합니다. . 이것은 브라우저에 2열 레이아웃을 생성하도록 지시하고 각 열은 1fr을 차지합니다. (fr =분수 단위) 공간.

fr 단위는 flex: 1과 유사하게 각 열 대 다른 열의 비율입니다. flexbox 메서드에서 사용한 규칙입니다. 열을 1fr 1fr로 설정하기 각 열이 동일한 양의 공간을 차지함을 의미합니다.

grid-gap 속성을 사용하여 그리드 항목 사이에 공백 추가

CSS 그리드 사용의 한 가지 큰 이점은 그리드 항목 사이에 공간을 추가하기 위해 패딩이나 여백을 사용할 필요가 없다는 것입니다.

grid-gap을 사용할 수 있습니다. (또는 gap 최신 브라우저에서) 그리드 템플릿에 공간을 자동으로 추가합니다.

grid-gap을 설정했습니다. 20px로 늘리면 브라우저는 모든 항목이 나란히 놓여 있든 쌓여 있든 20px의 공간을 추가하는 것을 알 수 있습니다.

그리드의 모든 CSS 속성이 상위 .grid-container 요소. 실제로 자식 .grid-child에 대한 CSS를 작성할 필요가 없었습니다. 요소!