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

Div의 가로 정렬

일반적인 레이아웃 작업은 두 개의 div를 가로로 정렬하는 것입니다. 각각에는 자체 제목과 목록이 포함되어 있습니다. 테이블을 사용하면 이를 쉽게 달성할 수 있지만 레이아웃에 테이블을 사용하는 것은 바람직하지 않은 경우가 많습니다. 테이블을 사용하지 않고 div를 가로로 정렬하려면 다음 접근 방식을 고려하세요.

상위 컨테이너에서 Div 부동

상위 컨테이너 내에서 div를 부동합니다. 플로팅을 사용하면 div를 수평으로 나란히 배치할 수 있습니다. 상위 컨테이너의 스타일이 다음과 같은지 확인하세요.

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

• float: left: 상위 컨테이너 내에서 div를 왼쪽으로 플로팅합니다.
• clear: none: div가 상위 컨테이너 옆으로 흐르도록 허용합니다. 클리어하지 않고 서로 line.

예

<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에는 표가 필요 없이 제목과 목록이 포함됩니다. .

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