1. ホーム
  2. ハイパーリンク

[解決済み】2つのdivを隣り合わせにするCSS

2022-04-03 04:46:20

質問

を2つ並べたいのですが <div> が隣り合っています。右側の <div> は約200pxで、左の <div> は、画面幅の残りを埋めなければならないのでしょうか?どうすればいいのでしょうか?

どのように解決するのですか?

を使用することができます。 フレックスボックス を使用して、アイテムをレイアウトすることができます。

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

これは基本的に、フレックスボックスの表面を削っただけのことです。フレックスボックスはかなり驚くべきことをすることができます。


古いブラウザに対応するために、CSSを使用することができます。 フロート プロパティで解決できます。

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>