HTML&CSS　画像を左に、記事を右にしたい。

いくつかのサイトを調べて、その通りに試してみましたが、解決に至らずご質問させていただくことにしました。

一つ目の<article>で囲まれた記事が上に一つ。
その左下に画像と、右側に二つ目の<article>に囲まれた記事を一つ並べたいのですが、うまくいきません。添付画像の様に分断してしまいます。

この画像の横に<article>で囲まれた記事をもって来たいのです。　[紹介文　かぴちゃんです]から始まる記事です。

今のところ、解決策が全くわからないので、ソースは書けていません。シンプルに画像を上下の<article>の間に挟んでいるだけです。

言葉足らずなところがありまして申し訳ありませんが、何卒お答え頂けたら幸いです。

yambejp

2022/07/12 07:56

現状のHTMLとCSSのソースを提示ください

yuumi_HP

2022/07/12 08:05

こちらになります。

行動規範の内容に同意します

回答1件

追記で共有いただいたコードの1つめのarticleは下記でした。

html
1<article>
2
3
4<div class="wrap">
5<div class="box box1">実績</div>
6<div class="box box2">依頼</div>
7<div class="box box3">カレンダー</div>
8<div class="box box4">おまけ</div>
9</div>
10
11</article>

おそらく間違えたのだと思いますので、こちらの解釈で作りました。

要件

かぴちゃんです、2019年からMIXをしてます。を上部に配置
1の真下を2分割して左に写真。右に納品日に関する記事を配置

結果の写真をはこのようになりましたが、認識としては正しいでしょうか？

コード

最低限要件の満たすコードにしていますので、余計な修正は加えていません

html
1<p>紹介文
2かぴちゃんです、2019年からMIXをしてます。
3推しの「MIXしない？」の一言でMIX師になっちゃいました～。
4まぁこれからも成長していきますけどね！！！！
5-
6「初めての歌ってみたを出してみたい・作ってみたいんだけど」「依頼の仕方とか録音の仕方がわからないんだけど」「お金ないんよなぁ」そんなあなたにかぴちゃんいかが？</p>
7
8
9</article>
10
11<!-- 下記が追加したコード 追加位置に気をつけてください------------------- -->
12
13<div class="container">
14  <div class="left">
15    <img class="img" src="./img/noimage.png" alt="かぴっち">
16  </div>
17  <div class="right">
18    MIX依頼をしていただく際の確認とお願い
19
20＃納品日について
21○納品予定日は原則ご依頼いただいてから2-3週間後の次の土曜日です
22○平日納品と1週間以内の納品は原則お受けできません
23○音源をいただいて確認できてからカウントします
24○依頼数は週に1本です(たまに2本頑張るけどその日のモチベと気分次第)
25○カレンダーは随時更新しますが確認したい場合は気軽にＤＭください
26○プロフィールのリンクはカレンダー(予定表)になります、誰でも閲覧できます
27○例外として日曜日や2週間以内での納品は有償(¥1000)でお受けします
28
29＃提出していただく音源について
30○頭出しはしてくれると嬉しいです(環境難もあるので努力目標で)
31○音割れ、ノイズ、歌詞抜けや合いの手は事前に確認をお願いします
32○基本的に、inst音源とボーカル音源の二つで大丈夫です
33○ハモリや合いの手、歌詞が重なる箇所があれば別トラックでお願いします
34○あまりにも大量のトラック数はご容赦ください
35○音源を送る際に以下を気にしてくれると助かります
36・ボーカル情報(本人の声か、コラボ者はいるか)
37・楽曲情報(曲名/作者、リンクあると嬉しい)
38・ファイル名(中身のわかる名前でお願いします)
39・参考動画(イメージしてる参考動画があればリンクください)
40○データは音声ファイル(MP3,WAV,M4A,その他)でお願いします
41○動画ファイルは一応可能ですが変換時の音質の保証はできません
42
43＃DMでのやり取りについて
44○文章に迷ったら「初めまして××です、MIXの依頼をしたく連絡しました。　
45　××日納品希望ですけど大丈夫ですか？」と送ってください
46○後は私が勝手に質問したり現状伝えたりするので答えていただけたら
47○データはギガファイル便かDropBoxで送ってください
48○どうしても無理です！って人はメールかGoogleドライブにて対応いたします
49　アドレス：xxxxxxxxxxxxxxxxxxxxxxx
50  </div>
51</div>

css
1/* CSSファイルの末尾に追加 */
2.container {
3  display: flex;
4  width: 1500px;
5  margin: 0 auto;
6  max-width: 100%;
7}
8.container .left {
9  flex: 0 0 50%;
10  position: relative;
11}
12.container .right {
13  flex: 0 50 50%;
14  background: white;
15  line-height: 2;
16}
17
18.img {
19  position: absolute;
20  top: 50%;
21  left: 50%;
22  transform: translate(-50%, -50%);
23  width: 400px;
24  height: 400px;
25}