HTML css でLP作成中です。
画像の横にテキストを入れたいのですが。
うまくいきませんのでご教示いただけると幸いです。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>munchkin</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 10 <!-- ヘッダー --> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <img src="./img/logo.png"> 15 </div> 16 <div class="header-right"> 17 <div id="nav"> 18 <ul> 19 <li><a href="">Skill</a></li> 20 <li><a href="">About</a></li> 21 <li><a href="">Contact</a></li> 22 </ul> 23 </div> 24 </div> 25 </div> 26 </header> 27 <!--猫ちゃん画像 --> 28 <div class="top-warpper"> 29 <img src="./img/cat-1.png" alt="" > 30 </div> 31 32 <!-- Skills --> 33 34 <div class="Skillwarpper"> 35 <div class="heading"> 36 <h3>Skill</h3> 37 </div> 38 <div class="message-warpper"> 39 <div class="message"> 40 <img class="" src="./img/cat-2.png"> 41 42 <p class="p1">We sleep whenever we want. We sleep wherever we want. All places can be our beds. 43 We sleep whenever we want. We sleep wherever we want. All places can be our beds. 44 We sleep whenever we want. We sleep wherever we want. All places can be our beds.</p> 45 </div> 46 <div class="message"> 47 <p class="">We sleep whenever we want. We sleep wherever we want. All places can be our beds. 48 We sleep whenever we want. We sleep wherever we want. All places can be our beds. 49 We sleep whenever we want. We sleep wherever we want. All places can be our beds.</p> 50 <div> 51 <img class="img1" src="./img/cat-3.png"> 52 </div> 53 </div> 54 55 </div> 56 </div> 57 58 59 60 </body> 61</html>
css
1body{ 2 font-family: YuGothic,'Yu Gothic',sans-serif; 3} 4 5 6header { 7 width:1440px; 8 height:80px; 9} 10 11.container{ 12 width:980px; 13 margin: 0 auto; 14} 15.header-left{ 16 float: left; 17 margin-top: 10px; 18} 19.header-right{ 20 float:right; 21 margin-top: 10px; 22} 23.header-right #nav ul li{ 24 /* float:right; */ 25 display: inline; 26} 27.header-right #nav ul li a{ 28 margin-right: 43px; 29 text-decoration: none; 30 font-size: 21.34px; 31 color: #5F2201; 32 font-weight:700; 33 34} 35/* .top-warpper{ */ 36 /* background-image: url(./img/cat-1.png); 37 background-size: cover; */ 38/* } */ 39.top-warpper img{ 40 width:100%; 41} 42.heading{ 43 text-align: center; 44 font-size: 48px; 45 color: #5F2201; 46 font-weight:700; 47} 48.Skillwarpper{ 49 width: 1440px; 50} 51.message { 52 width: 980px; 53 margin: 0 auto; 54} 55 56 57.message img{ 58 display: inline-block; 59 60 61} 62.message p{ 63 display: inline-block; 64 65} 66
やってみたこと。
pタグを浮き上がらせるイメージでfloatを入れてみましたがうまくいかず。
display:inlineを設定してもダメでした。
以上、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/03 14:28