テーブルを使用せずに 2 つの Div を水平方向に揃えるにはどうすればよいですか?

Div の水平方向の配置

一般的なレイアウト タスクは、それぞれに独自のタイトルとリストを含む 2 つの 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 が水平方向に整列され、それぞれにタイトルとリストが含まれます。 .

以上がテーブルを使用せずに 2 つの Div を水平方向に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。