테이블을 사용하지 않고 HTML에서 Div를 어떻게 가로로 정렬할 수 있나요?

테이블 없이 Div 가로 정렬

HTML에는 요소를 정렬하는 다양한 방법이 있습니다. 테이블을 사용하여 div를 정렬하는 것은 간단하지만 일부는 테이블 형식이 아닌 접근 방식을 선호합니다. 표에 의존하지 않고 수평 div 정렬을 달성하는 방법은 다음과 같습니다.

CSS Float 및 Clear 사용

1. 상위 div 만들기: 원하는 두 div를 래핑합니다. 상위 div에 정렬합니다.
2. div 플로팅: 플로트: 왼쪽; 하위 div에 대한 속성입니다. 이렇게 하면 상위 div의 왼쪽에 떠 있게 됩니다.
3. float 지우기: 하위 div가 수직으로 쌓이는 것을 방지하려면clear: none; 상위 div에 대한 속성입니다. 이렇게 하면 요소가 플로팅 div 주위를 둘러싸는 것을 방지할 수 있습니다.

예제 코드

.aParent div {
    float: left;
    clear: none; 
}

<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를 가로로 정렬하고 다시 정렬할 필요가 없습니다. 웹페이지의 표 형식 레이아웃으로 변환하세요.

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