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

Barbara Streisand
リリース: 2024-11-21 00:11:14
オリジナル
289 人が閲覧しました

How to Horizontally Align Divs Without Using Tables?

水平方向の Div 配置

テーブルを使用せずに 2 つの div を水平方向に配置するには、それらを親コンテナ内でフロートさせます。これを実現する方法の詳細な内訳は次のとおりです。

  1. Div をフロート化します。

    • 次の CSS プロパティを追加します。のdivs:

      float: left;
      ログイン後にコピー
  2. Clear Floats:

    • div の崩壊を防ぐため親内の不要な要素を削除するには、次のプロパティを親に追加します要素:

      clear: none;
      ログイン後にコピー
  3. HTML と CSS の例:

    • これは例ですHTML と CSS がどのように機能するかlook:

      <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>
      ログイン後にコピー
      .aParent div {
        float: left;
        clear: none; 
      }
      ログイン後にコピー

このメソッドは、テーブルを使用せずに div を水平方向に整列させるためのクリーンで簡単な方法です。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート