http://www.tada.co.jp/engineering/
少し違うのですが形的には上記のサイトのように左右交互に画像と本文があるようにしたいのですが
main4の本文が画像の下に来てしまいます。
positionで変えようとすると、その下のmain5の画像にfloatが効かなく?なります。
サイドメニューが邪魔かと思い消してみても駄目でした。
サイドメニューとメインのHTMLとCSSです。
初心者なのでコードが見づらいと思いますがよろしくお願いいたします。
HTML
1 <main> 2 <div id="side"> 3 <div class="sidemenu"> 4 <ul> 5 <li><a href="">サイドメニュー1</a></li> 6 <li><a href="">サイドメニュー2</a></li> 7 <li><a href="">サイドメニュー3</a></li> 8 <li><a href="">サイドメニュー4</a></li> 9 <li><a href="">サイドメニュー5</a></li> 10 <li><a href="">サイドメニュー6</a></li> 11 <li><a href="">サイドメニュー7</a></li> 12 <li><a href="">サイドメニュー8</a></li> 13 <li><a href="">サイドメニュー9</a></li> 14 <li><a href="">サイドメニュー10</a></li> 15 </ul> 16 17 </div> 18 </div> 19 20 <div id="content"> 21 <div class="main1"> 22 <figure><img class="gazou1 "src="jpg"alt="" width="410px" height="200px"></figure> 23 <h1>見出し1</h1> 24 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 25 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 26 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 27 </div> 28 29 30 <div class="main2"> 31 <figure><img class="gazou2 "src="jpg" alt="" width="275px" height="200px"></figure> 32 <h1>見出し2</h1> 33 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 34 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 35 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 36 </div> 37 38 39 40 <div class="main3"> 41 <figure><img class="gazou3" src="jpg" alt="" width="275px" height="200px"></figure> 42 <h1>見出し3</h1> 43 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 44 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 45 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 46 </div> 47 48 <div class="main4"> 49 <figure><img class="gazou4" src="jpg" alt="" width="275px" height="200px"></figure> 50 <h1>見出し4</h1> 51 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 52 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 53 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 54 </div> 55 56 <div class="main5"> 57 <figure><img class="gazou5" src="png" alt="" width="275px" height="200px"></figure> 58 <h1>見出し5</h1> 59 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 60 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 61 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 62 </div> 63 64 <div class="main6"> 65 <figure><img class="gazou6" src="jpg" alt="" width="275px" height="200px"></figure> 66 <h1>見出し6</h1> 67 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 68 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 69 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 70 </div> 71 72 </div> 73 </main> 74
CSS
1#content { 2 float: left; 3 width: 990px; 4 background-color: #f4a460; 5 position:absolute;right: 10px; top: 92px; 6} 7 8#content h1 { 9 text-align: center; 10} 11.main1 { 12 text-align: right; 13 margin-bottom: 100px; 14 } .anime1 p { 15 display: inline-block; 16 text-align: left; 17} 18.gazou1 { 19 float: left; 20 width: 30%; 21} 22 23.main2 { 24 display: block; 25 margin-bottom: 250px; 26} 27.main2 h1{ 28 margin-bottom: 0; 29} 30.main2 { 31 text-align: right; 32 margin-bottom: 100px; 33 } .anime2 p { 34 display: inline-block; 35 text-align: left; 36 } 37.gazou2 { 38 float: right; 39} 40 41 42.main3 { 43 margin-bottom: 250px; 44} 45.main3 h1 { 46 margin-bottom: 0; 47} 48.main3 { 49 text-align: right; 50 margin-bottom: 100px; 51 } .anime3 p { 52 display: inline-block; 53 text-align: left; 54} 55.gazou3 { 56 float: left; 57 margin-bottom: 400px; 58} 59 60 61.main4 h1{ 62 margin-bottom: 0; 63} 64.main4 { 65 text-align: right; 66 margin-bottom: 100px; 67 } .anime4 p { 68 display: inline-block; 69 text-align: left; 70 } 71.gazou4 { 72 float: right; 73} 74 75 76.main5 img { 77 float: left; 78} 79 80.main6 img { 81 float: right; 82} 83
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/29 04:39
2020/06/29 05:22
2020/06/29 05:37
2020/06/29 06:03
2020/06/29 06:32