2×3の表のような画像があり、その上に文字を配置したいのですが上手くいきません。
また、AAA~CCCは横並びで、折り返してDDDをAAA、EEEをBBB、FFFをCCCの下に来るように配置したいです。(下部画像参照)
コードは考えていてわからなくなってしまったので、途中になっています・・・。
HTML、CSSを勉強し始めたばかりなのでわからないことが多くて知識不足ですが、回答していただけるとありがたいです。
よろしくお願いします。
HTML
1 <div class=×××> 2 <img src="image/×××" width="×××" height="×××" alt="×××"> 3 <dl> 4 <dt>AAA</dt> 5 <dt>BBB</dt> 6 <dt>CCC</dt> 7 <dt>DDD</dt> 8 <dt>EEE</dt> 9 <dt>FFF</dt> 10 </dl> 11 </div>
CSS
1.×××{ 2 position: relative; 3} 4 5.××× img{ 6 margin: 0px 40px 0px 40px; 7 height: 250px; 8 width: 600px; 9} 10 11.××× dl{ 12 overflow: hidden; 13 margin: 0; 14 padding: 0; 15} 16 17.××× dl dt{ 18 font-size: 20px; 19 font-weight: bold; 20 float: left; 21 text-align: center; 22 margin: 0; 23 padding: 0; 24} 25```![イメージ説明](6f05481b823b2e302d164b0dd3d9b304.png)
imgを、子要素に使用しないで、親要素の背景ではダメなのでしょうか?
「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。
yoshinaviさん
ご回答ありがとうございます。
最近HTML、CSSの勉強を始めたばかりで知識が浅く、こうしたら良い、良くない等わかっていないことが多い為、その発想に至っていませんでした。
親要素の背景で作ってみたいと思います。
kei344さん
わかりにくい質問で申し訳ないです。
ネットで調べながらやっていたのですが、色々上手くいかず何がダメでどうして上手くいかないのだろうと混乱してしまってわかりにくい質問となってしまいました。
次回質問する際は気を付けたいと思います。
ありがとうございました。
回答3件
あなたの回答
tips
プレビュー