html
1 2 <div id="dream-pool"> 3 <ul> 4 <li> 5 <div class="dream-box"> 6 <div class="dream-pic"> 7 <img class="dreams" src="<%= asset_path "assets/ultraman.png" %>"> 8 </div> 9 10 <div class="dream-note"> 11 <img class="note" src="<%= asset_path "assets/ultranote.png" %>"> 12 </div> 13 14 <p>これはテストです。。。。。。。。。。。。。。。。。。。。。。。</p> 15 </div> 16 </li> 17 <li> 18 <div class="dream-box"> 19 <div class="dream-pic"> 20 <img class="dreams" src="<%= asset_path "assets/designer.png" %>"> 21 </div> 22 23 <div class="dream-note"> 24 <img class="note" src="<%= asset_path "assets/designnote.png" %>"> 25 </div> 26 27 28 <p>これはテストです。</p> 29 </div> 30 </li> 31 <li> 32 <div class="dream-box"> 33 <div class="dream-pic"> 34 <img class="dreams" src="<%= asset_path "assets/gamecreater.png" %>"> 35 </div> 36 37 <div class="dream-note"> 38 <img class="note" src="<%= asset_path "assets/gamenote.png" %>"> 39 </div> 40 41 <p></p> 42 </div> 43 </li> 44 <li> 45 <div class="dream-box"> 46 <div class="dream-pic"> 47 <img class="dreams" src="<%= asset_path "assets/patticie.png" %>"> 48 </div> 49 50 <div class="dream-note"> 51 <img class="note" src="<%= asset_path "assets/patticienote.png" %>"> 52 </div> 53 54 55 <p></p> 56 </div> 57 </li> 58 <li> 59 <div class="dream-box"> 60 <div class="dream-pic"> 61 <img class="dreams" src="<%= asset_path "assets/musician.png" %>"> 62 </div> 63 64 <div class="dream-note"> 65 <img class="note" src="<%= asset_path "assets/musiciannote.png" %>"> 66 </div> 67 68 <p></p> 69 </div> 70 </li> 71 <li> 72 <div class="dream-box"> 73 <div class="dream-pic"> 74 <img class="dreams" src="<%= asset_path "assets/hatena.png" %>"> 75 </div> 76 77 <div class="dream-note"> 78 <img class="note" src="<%= asset_path "assets/hatenanote.png" %>"> 79 </div> 80 81 <p></p> 82 </div> 83 </li> 84 </ul> 85 86 </div>
css
1 2#dream-pool{ 3 height:550px; 4 margin: 25px auto; 5 width:700px; 6 box-sizing: border-box; 7} 8 9 10 11 12 13#dream-pool ul li{ 14 display: inline-block; 15} 16 17#dream-pool ul{ 18 margin: 0 auto; 19 padding: 0px; 20} 21 22.dream-box{ 23 background-color: #FFD700; 24 height:271px; 25 margin-top: 5px; 26 width:229px; 27} 28 29/*ライトバーを独立させている*/ 30 31.bar:after{ 32 content: ""; 33 clear: both; 34 35 36} 37 38.dreams{ 39 height: 104px; 40 margin-top: 5px; 41 width:200px; 42 43} 44.dream-pic{ 45 text-align: center; 46} 47.dream-note{ 48 margin-top: -31px; 49 text-align: center; 50} 51.note{ 52 height: 100px; 53 width: 150px; 54 55} 56.dream-box p{ 57 font-size: 14px; 58}
画像のような状態です!
liで横並びに表示させているのですが、その中のp要素に文字をいれるとその行の高さの文だけliの部分が一部分だけあがってしまいます。
初心者でなかなかよくわからないのですが
教えていただける嬉しいです。
回答2件
あなたの回答
tips
プレビュー