左が画像、右が文章の2列をそれぞれ縦に4つ並べたいのですが、1つだけが横2列になりません。
↓こうしたいのですが、
html
1```html 2 3<div class="flex-container"> 4 5 6<div class="flex-item"> 7<p><img src="~~~~.png" alt="~~~~" class="example" width="450" height="300"></p> 8</div> 9 10<div class="flex-item"> 11<p class="text2">~~~~~~~~</p> 12<p class="left1">~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~。</p> 13 14<br> 15 <div class="clear"></div></div> 16 17</div> 18 19<div class="flex-item"> 20<p><img src="~~~~~~~~~~.png" alt="~~~~~~~~~~" class="example" width="450" height="300"></p> 21 22</div> 23 24<div class="flex-item"> 25<p class="text2"> ~~~~~~~~~~~~~~~~~</p> 26<p class="left1">~~~~~~~~~~~~~~~~~~~~~~~~~~~^<br> 27~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 28~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 29</p></p> 30 31<br> 32 <div class="clear"></div></div> 33 34 35 36 37 38 39<br> 40<br> 41<br> 42<br> 43 44 45 46<div class="flex-container"> 47 48<div class="flex-item"> 49<p><img src="~~~~~~~~~~~.png" alt="~~~~~~~" class="example" width="450" height="300"><br></p></div> 50 51<div class="flex-item"> 52<p class="text2">~~~~~~~~~~~~~~~~~~~~~~~~~~</p> 53 54<p class="left1">~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 55~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 56~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 57~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 58~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 59~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 60</p><br></div> 61 <div class="clear"></div> 62</div> 63 64 65<br> 66<br> 67<br> 68<br> 69 70 71<div class="flex-container"> 72 73<div class="flex-item"> 74 <p> <img src="~~~.png" alt="~~~~" class="example" width="450" height="300"><br></p></div> 75 76 77<div class="flex-item"> 78 <p class="text2">~~~~~~~~~~~~~~~~~~~~~~~~~~</p> 79 80<p class="left1">~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 81~~~~~~~~~~~~~~~~~~~~~~~~~~ 82<br>~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 83~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 84~~~~~~~~~~~~~~~~~~~~~~~~~~<br> 85~~~~~~~~~~~~~~~~~~~~~~~~~~。 86<br>~~~~~~~~~~~~~~~~~~~~~~~~~~。</p><br> 87 <div class="clear"></div></div> 88</div> 89</div> 90 91 92 93 94 95```css 96 97 98.flex-container { 99 100 display: flex; 101 102 flex-flow: row; 103justify-content: center; /* 中央寄せ */ 104} 105 106 107.flex-item { 108 109 border: 1px; 110 padding: 10px; 111 112} 113... 114 115 116 117 118 119 120コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/04 08:02
2018/11/04 08:30
2018/11/04 08:32