[解決済み] 画像をインラインで表示する方法
2022-02-08 09:50:07
質問
私は3つの画像を持つナビゲーションdivを持っています。各画像には、画像の下部に絶対的に配置されたタイトル要素があります。3つの画像を同じ行に隣接して表示させようとしていますが、画像はブロックとして表示されます。
HTMLです。
<div class = "nav">
<div class = "container">
<div class = "image">
<img src = "img1">
</div>
<div class = "title">
<p> text1 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img2">
</div>
<div class = "title">
<p> text2 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img3">
</div>
<div class = "title">
<p> text3 </p>
</div>
</div>
</div>
CSSです。
.nav {
display: inline;
}
.container {
position: relative;
width: 100%;
}
.image img {
width: 30%;
height: 4.5in;
}
.title {
width: 30%;
position: absolute;
bottom: 0; left: 0;
}
解決方法は?
まず、HTMLコードを修正する必要があります。
それは
<div class = "title">
であって
<div class = "title>
タイトルの末尾の"が抜けている。
で、コンテナにfloatを追加し、幅を30%にします。なぜなら、画像の幅を30%にしたいからです。
.container {
float:left;
position: relative;
width: 30%;
}
3つのタイムコンテナを置いているので、100%×3が揃うようにお願いしているのです。
また、CSSにfloatを含む画像クラスを作成してください。
.image{
float:left;
}
最後に、CSS で .image img の幅を 100% に変更すると、30% のコンテナの代わりに 100% の幅が使用されます。
.image img {
width: 100%;
height: 4.5in;
}
関連
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 "margin: 0 auto" が中央揃えにならない
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] :last-child が期待通りに動作しない?
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] TD rowspan が機能しない