画像 文字 横並びにしたい

Question

前提・実現したいこと

|画像|テキスト２行
|画像|テキスト２行

上記のようにしたいがinline-blockなどを使用してもなりません。
初めての質問のため至らない点がありましたら申し訳ございません。

<div> 
　<img class="news" src="img/IMG1.png">
　　<ul class="news-1">
　　　<li>テキスト</li>
     <li>テキスト</li>
　　</ul>
</div>
<div>
　<img class="news" src="img/IMG2.png">
　　<ul class="news-1">
　　　<li>テキスト</li>
　　　<li>テキスト</li>
　　</ul>
</div>

.news{
  width: 15vw;
  height: 10vw;
}

.news1{
  display: inline-block;
  
}
.news,.news1{
  vertical-align: middle;
}

Answer 1

フレックスボックス | MDNを使用しましょう。

結果

liの部分のテキストのスタイリングは適時指定してください。
例)
list-style: none;など

<div class="flex">
  <img 
    class="news"
    src="https://via.placeholder.com/200x150" 
  />
  <ul class="news-1">
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</div>
<div class="flex">
  <img 
    class="news"
    src="https://via.placeholder.com/200x150" 
  />
  <ul class="news-1">
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</div>

.flex {
  display: flex;
}

.flex + .flex {
  margin-top: 10px;
}

Comments

[kai0310]

文字を上下中央揃えにしたいなら.flexに align-items: center; を指定してください。

動作サンプル:
https://codepen.io/k011510/pen/jOrEKya?editors=1100

[kai0310]

質問者のコードの原型をある程度とどめていますがclassなど必要のないものもありますので適時修正してください。

[tan0203]

ありがとうございます。できました！

Answer 2

これでできたとけど、なんかもっと良い方法があると思います。

.news{
  width: 15vw;
  height: 10vw;
  clear: left;
  float:left;
}

.news1{
  display: inline-block;
  height: 10vw; /*画像と高さをそろえている*/
}

Answer 3

pタグはだめですか？

<div class="test"> 　<p><img class="news" src="img/IMG1.png"></p>　 　<p>テキスト</p> <p>テキスト</p> </div> <div> 　<p><img class="news" src="img/IMG2.png"></p>　 　<p>テキスト</p> <p>テキスト</p> </div>

.test p{
display:inline-block;
vertical-align:top; /縦方向の揃え位置を指定/
}

Comments

[kai0310]

どうやらこの回答だけでない様ですがコードを提示する際はMarkdown記法を使用してください。

[tan0203]

ご回答ありがとうございます。
なぜかやはり横並びにならず縦のままになってしまいます。

前後に別のコードを書いていますがその設定が適応されている可能性はあるのでしょうか？