[解決済み】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>
関連
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] フォームの中にフォームがある、でいいのかな?[重複]
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] Railsです。railsアプリで<img src= >をimage_tagに変換する方法
-
[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。