css - フロートなしで隣り合う 2 つの DIV

Question

DIV#1 のコンテンツは画像で、DIV#2 のコンテンツは入力テキストフィールドです。

#1 {
  width: 48px;
  height: 48px;
}

#2 {
  height: 48px;
}

ページをズームすると＃1の画像がレイアウトを壊すため、フロートを使用したくありません。テーブルで試してみましたが、マージンとパディングを設定できません。display: inline-block も試しましたが、パディング/マージンも使用できません。

パディングを除いてページ全体で % サイズ変更を使用しているため、ズームやさまざまな解像度ですべて機能します。

score 5 · Accepted Answer

それらが入っているコンテナーの幅が DIV の (結合された) 幅と同等またはそれ以上であることを確認し、次の CSS を使用します。

#1, #2 { display: inline-block }

また、では数字を ID として使用できないため<HTML5、デモでは 1,2 の代わりに a, b を使用しました。

デモに示されているようにコンテナーの幅が十分である限り、この例でパディング/マージンを使用できるはずです。

1 に答える 1