ドットインストールを使ってweb製作を学んでいます。
動画に従ってコードを書いていたつもりですが、つまづいてしまいました。
発生している問題・エラーメッセージ
CSSでfloatプロパティを使ってpタグのテキストを移動したいのですが、ただ上から順に表示されるだけです。
エラーメッセージ
該当のソースコード
HTMLファイル
1<section class="features"> 2 3 <div class="container"> 4 5 <h1 data-subtitle="-Features-" class="section-title">Dotinstall Paneの特徴</h1> 6 7 <section class="feature"> 8 <img src="img/feature1.png" width="420" height="270" alt="特徴1"> 9 <div class="desc"> 10 <h1>すごい特徴があるよ</h1> 11 <p>いろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよ</p> 12 </div> 13 </section> 14 15 <section class="feature"> 16 17 <img src="img/feature2.png" width="420" height="270" alt="特徴2"> 18 <div class="desc"> 19 <h1>すごい特徴があるよ</h1> 20 <p>いろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよ</p> 21 </div> 22 </section> 23 24 <section class="feature"> 25 <img src="img/feature3.png" width="420" height="270" alt="特徴3"> 26 <div class="desc"> 27 <h1>すごい特徴があるよ</h1> 28 <p>いろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよいろいろあるよ</p> 29 </div> 30 </section> 31 32 </div> 33 34 </section> 35 36CSSファイル 37 38body { 39 font-size: 16px; 40 font-family: verdana, sans-serif; 41 color: #333; 42 margin: 0; 43} 44 45.container { 46 width: 820px; 47 margin: 0 auto; 48 padding: 60px 0; 49} 50.feature h1 { 51 font-weight: normal; 52 font-size: 18px; 53} 54 55.feature desc { 56 width: 360px; 57 58} 59 60.feature:nth-of-type(odd) .desc { 61 float: right; 62 padding-left: 40px; 63} 64 65.feature:nth-of-type(even) .desc { 66 float: left; 67 padding-right: 40px; 68} 69 70 71### 試したこと 72 73コードを見直してみましたが分かりませんでした。 74 75### 補足情報(FW/ツールのバージョンなど) 76 77ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/20 16:47