두 개의 div를 나란히 표시하는 방법

방법은 다음과 같습니다. 1. 두 개의 div 요소를 "float:left;" 속성으로 설정합니다. 2. CSS의 플렉스 레이아웃을 사용하여 요소를 나란히 표시합니다. 3. CSS의 그리드 레이아웃을 사용하여 요소를 나란히 표시합니다. . 보여주다.

두 개의 div를 나란히 표시하려면 다음 방법을 사용할 수 있습니다.

float 속성 사용 CSS에서는 두 개의 div 요소가 옆으로 표시되도록 float:left 속성을 설정할 수 있습니다. 옆에. 샘플 코드는 다음과 같습니다.

<style>
    .div1, .div2 {
        float: left;
        width: 50%; /* 两个div据父素宽度的一半 */
 }
</>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>

플렉스 레이아웃 사용: CSS의 플렉스 레이아웃을 사용하면 요소를 쉽게 나란히 표시할 수 있습니다. 부모 요소의 display 속성을 flex로 설정하고, 자식 요소의 flex 속성을 1로 설정하여 부모 요소의 너비를 균등하게 차지하도록 합니다. 샘플 코드는 다음과 같습니다.

<style>
    .container {
        display: flex;
    }
    .div1, .div2 {
        flex: 1;
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

그리드 레이아웃 사용: CSS 그리드 레이아웃을 사용하면 요소를 나란히 표시할 수도 있습니다. 상위 요소의 표시 속성을 그리드로 설정하고, 하위 요소의 그리드-열 속성을 설정하여 그리드에서 하위 요소의 위치를 ​​제어합니다. 샘플 코드는 다음과 같습니다.

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 将父元素分为两列 */
    }
    .div1 {
        grid-column: 1; /* 第一列 */
    }
    .div2 {
        grid-column: 2; /* 第二列 */
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

위의 세 가지 방법은 특정 상황에 따라 적절한 방법을 선택하여 두 개의 div를 나란히 표시할 수 있습니다.

위 내용은 두 개의 div를 나란히 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!