テーブルを使用せずに HTML で Div を水平方向に整列するにはどうすればよいですか?

テーブルを使用しない水平 Div 配置

HTML では、要素を配置するさまざまな方法があります。テーブルを使用して div を整列させるのは簡単ですが、非テーブル形式のアプローチを好む人もいます。テーブルに依存せずに div の水平方向の配置を実現する方法は次のとおりです:

CSS Float および Clear を使用する

1. 親 div を作成します: 必要な 2 つの div をラップします。親 div に整列します。
2. Float divs: フロートを追加します: left;プロパティを子 div に渡します。これにより、子 div が親の左側にフローティングされます。
3. フロートをクリアします: 子 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>

次の手順に従うことで、2 つの div を水平方向に整列させ、再配置する必要がなくなります。 Web ページの表形式のレイアウトに変換します。

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