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

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

Web デザインでは、特にコンテンツを列で表示する場合に要素を水平方向に配置することがよくあります。テーブルはこのタスクに対する簡単な解決策を提供しますが、その使用が常に望ましいとは限りません。この記事では、テーブルに頼らずに div 要素を水平方向に整列させる問題について説明します。

Float コンテナと親コンテナの使用

div を水平方向に整列させる基本的なテクニックには、float プロパティの使用が含まれます。 。 Float を使用すると、要素が指定された方向に沿って移動し、隣接する要素と位置合わせされます。水平方向の配置を実現するには、次の原則を適用できます:

1. 親コンテナを作成する: div を親コンテナでラップします。このコンテナは、水平方向の配置のコンテキストを提供します。
2. Div をフロート化します: 親コンテナ内のすべての子 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 中国語 Web サイトの他の関連記事を参照してください。