【HTML・CSS】同じテーブル内で画像の右にテキストを配置したい。

したいこと

【HTML・CSS】テーブル内で画像の右にテキストを配置したいです。

完成イメージ

現在

現在ですと、画像の下に3つのテキストが位置してしまいます。
上記の画像と3つのテキストは同じテーブル内にあります。

現在のコード

HTML
1      <th class ="detail-table-th">
2
3          <div class ="detail-table-img">
4            <img src="image/footer-potepanda.png" width="60px" height="30px">
5          </div>
6          <div class ="detail-table-text">
7            <p class ="detail-table-text-1">POTEPANの<p>
8            <p class ="detail-table-text-1">選べる<p>
9            <p class ="detail-table-text-1"><span class="detail-table-text-1-emphasis">3</span>コース</p>
10          </div>
11
12      </th>

CSS
1.detail-table-th{
2width:218px;
3height:30px;
4}

やったこと

float:leftで画像を左側に配置。

行動規範の内容に同意します

回答2件

ベストアンサー

呈示のHTMLは P要素の閉じタグ</p>が<p>になっていますので、それを修正してください。

html
1<table>
2    <tr>
3        <th class="detail-table-th">
4
5            <div class="detail-table-img">
6                <img src="image/footer-potepanda.png" width="60px" height="30px">
7            </div>
8            <div class="detail-table-text">
9                <p class="detail-table-text-1">POTEPANの</p>
10                <p class="detail-table-text-1">選べる</p>
11                <p class="detail-table-text-1"><span class="detail-table-text-1-emphasis">3</span>コース
12                </p>
13            </div>
14
15        </th>
16    </tr>
17</table>

CSSは下記のような感じかな。要素サイズやフォントサイズは適当ですのでそちらで調整してください。

css
1.detail-table-th{
2  width:218px;
3  height: auto;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7}
8.detail-table-img {
9  width: 60px;
10  height: 30px;
11  align-self: center;
12  margin: 0 10px;
13}
14.detail-table-text {
15  margin: 0 10px;  
16}
17.detail-table-text-1 {
18  font-size: 16px;
19  line-height: 16px;
20  margin: 0;  
21}
22.detail-table-text-1:first-child {
23  font-size: 10px;
24}
25.detail-table-text-1-emphasis {
26  font-size: 22px;
27  line-height: 22px;
28}

投稿2020/01/12 14:20

総合スコア33715

2020/01/13 07:03

ありがとうございます、上記参考にしてcssを設定してみます。

行動規範の内容に同意します

detail-table-th { display: inline-block}

投稿2020/01/12 10:09

harinezumi.py

総合スコア282

NEMOTOSHOTA

2020/01/12 10:20

回答ありがとうございます。 detail-table-thクラスにinline-blockを使う形ですと、画像の右にテキストが配置されるのではなく、すぐ下にあるtd要素にdetail-table-thクラスがめり込む形になり崩れてしまいます。他の対策があれば教えていただきたいです。

harinezumi.py

2020/01/12 10:39 編集

これでどうでしょうか <html> <head> <style> .detail-table-th { display:flex;width:218px;height:30px;justify-content:space-between;align-items: center} .detail-table-text{width:218px;height:30px;} </style> </head> <body> <div class ="detail-table-th"> <div class ="detail-table-img"> <img src="image/footer-potepanda.png" width="60px" height="30px"> </div> <div class ="detail-table-text"> <div class ="detail-table-text-1">POTEPANの</div> <div class ="detail-table-text-1">選べる</div> <div class ="detail-table-text-1"><span class="detail-table-text-1-emphasis">3</span>コース</div> </div> </div> </body> </html>

NEMOTOSHOTA

2020/01/13 07:04

ありがとうございます。上記参考にしてもう一度組んでみます。

行動規範の内容に同意します

あなたの回答