以下の図と同じように作る

アセット 1.jpg

手順

sample.zip

  1. sample.zipをダウンロードして解凍する。
  2. divタグで、imgタグとpタグをくくり、1000pxでセンタリングする。
  3. divタグの中を横並びにする。
  4. pタグの横幅を550pxにする。
  5. divタグの横の並び方を左右等間隔にする。

回答例

https://www.youtube.com/embed/11RAybjVKPw?si=QpSsB9mYxfaLTXR5

作成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div>
        <img src="img/sample.jpg" alt="">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
    </div>
</body>

</html>
div {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

p {
    width: 550px;
    margin: 0;
}