質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

3872閲覧

横2列を縦に並べたいのですが、1つだけ横2列になりません。

yyymmm

総合スコア30

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/11/03 01:10

編集2018/11/03 01:13

左が画像、右が文章の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コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

2番目のみ<div class="flex-container">のタグがないからでは?(</div>も含めて)


「kei344」さんも回答していますが、各タグの「開始タグ・終了タグ」が揃っているかどうかの確認を、してください。

HTMLもCSSも「インデント」をしっかり付けて、記述すると整理されて見やすくなります。エディターによっては「補完」や「注意・警告」する機能を持っているのもありますので、いろいろ試してみてください。

投稿2018/11/04 01:11

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yyymmm

2018/11/04 08:02

ありがとうございます。<div class="flex-container">がありませんでした!
yoshinavi

2018/11/04 08:30

各パーツにあたる部分に(今回は<div class="flex-container">の部分)背景色を付けると、不具合箇所が分かりやすくなったりしますので、試してみてください。 解決されて何よりです。 (^^)
yyymmm

2018/11/04 08:32

そういうこともできるんですね。ご親切にありがとうございます・・・!
guest

0

</p></p> と、開始タグと終了タグの数が合っていないので崩れているのでは。

投稿2018/11/03 03:15

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yyymmm

2018/11/04 08:03

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問