표를 사용하지 않고 어떻게 Div를 가로로 정렬할 수 있나요?

테이블 없이 Div의 가로 정렬

웹 디자인에서는 특히 콘텐츠를 열로 표시할 때 요소를 가로로 정렬하는 경우가 자주 발생합니다. 테이블은 이 작업에 대한 간단한 솔루션을 제공하지만 테이블의 사용이 항상 바람직하지는 않습니다. 이 문서에서는 테이블을 사용하지 않고 div 요소를 가로로 정렬하는 문제를 다룹니다.

Float 및 상위 컨테이너 사용

div를 가로로 정렬하는 기본 기술에는 float 속성을 사용하는 것이 포함됩니다. . Float는 요소가 지정된 방향을 따라 이동하여 인접한 요소와 정렬되도록 합니다. 수평 정렬을 달성하려면 다음 원칙을 적용할 수 있습니다.

1. 상위 컨테이너 만들기: div를 상위 컨테이너에 래핑합니다. 이 컨테이너는 수평 정렬을 위한 컨텍스트를 제공합니다.
2. Divs 플로팅: 상위 컨테이너 내의 모든 하위 div에 대해 float 속성을 'left'로 설정합니다. 이로 인해 div가 왼쪽으로 떠 있게 됩니다.
3. Clear Float: 상위 컨테이너가 접히는 것을 방지하려면 'clear: none;'을 적용하세요. 하위 div에 스타일을 적용합니다. 이렇게 하면 상위 컨테이너의 높이가 부동 하위 div의 영향을 받지 않습니다.

4. 예제 코드:

   .aParent div {
    float: left;
    clear: none; 
   }
   
   .aParent {
    /* Add any additional styles for the parent container here */
   }

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
</div>

이 접근 방식을 구현하면 div가 지정된 구조를 유지하면서 수평으로 정렬되고 간격을 두세요.

위 내용은 표를 사용하지 않고 어떻게 Div를 가로로 정렬할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!