###[√] 画像の横にflex使ってテキストを表示させようとしたら画像が伸びる問題
見ての通り画像が縦に伸びております
div2つ使えばいいでしょ?という話ではありますが,
せっかくなのでflexでやる方法がないかと調べている途中です.
もしよければ,みなさんが,このようなレイアウトをするとき,
どのようにHTML,CSSを組むかも教えてもらえると,とても勉強になります.
###[√]CODE
html
1<!doctype html> 2 3<html> 4 5 <head> 6 7 <title>20161229</title> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 10 <style> 11 12 *{padding:0;margin:0; 13 box-sizing:border-box; 14 } 15 16 body{ 17 width:100vw; 18 min-height:100vh; 19 background:#eee; 20 padding:50px; 21 } 22 23 section{ 24 overflow-x:scroll; 25 min-height:calc(100vh - 100px); 26 background:#fff; 27 border:1px solid #555; 28 margin-bottom:50px; 29 padding:10px; 30 } 31 32 .chieLnk, 33 .chieCont{ 34 border-radius:5px; 35 border:1px solid rgb(176,123,230); 36 padding:1em; 37 } 38 .chieLnk{display:block;} 39 .chieCont{margin-top:10px;} 40 .chieLnkCont::after{ 41 content:""; 42 display:block; 43 width:0;height:0; 44 border-top:10px solid rgb(176,123,230); 45 border-right:20px solid transparent; 46 border-left:20px solid transparent; 47 margin:0 auto; 48 } 49 .reference{ 50 border-radius:5px; 51 background:#eee; 52 padding:10px; 53 padding-bottom:30px; 54 margin:40px 20px; 55 } 56 .reference::before{ 57 content:"reference \a"; 58 white-space:pre; 59 position:relative; 60 top:calc( (1.5em + 10px) / -2); 61 left:0; 62 background:#fff; 63 border:1px solid #ddd; 64 border-radius:5px; 65 padding:0.5em; 66 } 67 .referenceSite::after{ 68 content:"様"; 69 } 70 71 </style> 72 73 </head> 74 75 <body> 76 77 <section id="Dec291"> 78 79 <!--■■CSSはここから!■■--> 80 <style scoped> 81 82 .wrapper{ 83 display:flex; 84 align-content:flex-start; 85 } 86 .wrapper> *{ 87 flex:1 1 auto; 88 } 89 90 .smplString{ 91 padding:1em; 92 } 93 94 </style> 95 <!--■■CSSはここまで!■■--> 96 97 <div class="chieLnkCont"> 98 20161229[01] 99 <a class="chieLnk" href="http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11168480076"> 100 liタグ内で画像を左中央、テキストを画像の横で、左揃えにして上下中央に揃えるにはどうしたらいいでしょうか。</a> 101 </div> 102 103 <div class="chieCont"> 104 105 <!--■■HTMLはここから!■■--> 106 107 <span style="font-size:1.5em">2つのdivで囲んだver</span> (cssはstyle属性で指定) 108 <div style="margin-bottom:2em;"> 109 <div style="display:inline-block; vertical-align:top;"> 110 <img src="../150x150.png"> 111 </div> 112 <div style="display:inline-block; vertical-align:top; width:70%;"> 113 <p>家は舌のおじぎセロ団へ猫へしぶんたん。そしてどんどんいやましますという楽長だだ。</p> 114 <p>変なくましんないはたそして町のいや屋のときにはぱっとだめたいないて、何までけちの来れことたまし。出すぎ君は下で赤くましからいつかの人の楽器者をむしっ第一中人のかっかが云っで出しないます。</p> 115 <p>狸は前思うてっな。音は一出こどものようをわからて行っない。おしまいはゴーシュ楽長やそっちをひらいてやっまし。</p> 116 </div> 117 </div> 118 119 <span style="font-size:1.5em" >flexでやろうとしたver</span> (画像が縦長になる問題の解決策を調査中) 120 <div class="wrapper"> 121 122 <img src="../150x150.png"> 123 <div class="smplString"> 124 <p>家は舌のおじぎセロ団へ猫へしぶんたん。そしてどんどんいやましますという楽長だだ。</p> 125 <p>変なくましんないはたそして町のいや屋のときにはぱっとだめたいないて、何までけちの来れことたまし。出すぎ君は下で赤くましからいつかの人の楽器者をむしっ第一中人のかっかが云っで出しないます。</p> 126 <p>狸は前思うてっな。音は一出こどものようをわからて行っない。おしまいはゴーシュ楽長やそっちをひらいてやっまし。</p> 127 </div> 128 </div> 129 <!--■■HTMLはここまで!■■--> 130 131 </div> 132 133 <div class="reference"> 134 <span class="referenceSite">Scene Live</span><br> 135 <a href="http://scene-live.com/page.php?page=58"> 136 【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します</a><br> 137 </div> 138 139 </section> 140 141 </body> 142 143</html>
回答1件
あなたの回答
tips
プレビュー