HTMLを変更せずに2つのDivを水平方向に揃えるにはどうすればよいですか?

マークアップを変更せずに要素を水平に配置する

CSS を使用して水平に配置された 2 つの div #element1 と #element2 があるとします。ただし、#element2 の内容が異なるため、#element1 と完全に一致しません。 HTML 構造を変更せずに、コンテンツやブラウザの違いに関係なくそれらを配置する方法が必要です。

解決策: インライン ブロック表示を使用する

この配置を実現するには、次のようにします。両方の要素に display: inline-block プロパティを使用できます:

#element1 {
  display: inline-block;
  margin-right: 10px; /* Set padding between the elements */
}

#element2 {
  display: inline-block;
}

display: inline-block を設定すると、要素はインライン要素と同様に動作しますが、ブロックレベルのプロパティは維持されます。これにより、元の幅と高さを維持したまま水平に配置できます。 #element1 の margin-right プロパティは、要素間に望ましい間隔を導入します。

例

配置を示す例は次のとおりです:

<style type="text/css">
  #element1 {
    display: inline-block;
    margin-right: 10px;
  }

  #element2 {
    display: inline-block;
  }
</style>
<div>

このソリューションは、#element2 を #element1 の隣に効果的に配置し、#element2 の変数に関係なく一貫したパディングを維持します。幅。

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