スマホサイトで画像の右に文字組みを配置したい場合

前提・実現したいこと

スマホサイトを制作しています。画像の右に文字組みを配置したいのです。

発生している問題・エラーメッセージ

DWでは動いても、実際には画像と文字組みが上下に表示されてしまいます。
何がおかしいのでしょうか？

エラーメッセージ

html

<article class="imghoverArea"> <a href="m_news.html#news5"> <div class="thumbnai"><img src="m_img/mainVisual/osirase.jpg" width="63" height="53"></div> <div class="newstitleArea"> <p class="title"> 時短営業のお知らせ</p> <p class="date">2020.04.24</p> </div> </a></article>

css

/* news */

.innerWrapper{
margin:0 auto;
margin-top:10px;
padding-left: 10px;
padding-right: 10px;
}

#newsBox {
margin-left: auto;
margin-right: auto;
zoom:1;
}

#newsBox ul li{
display: inline;
}

.imghoverArea{
height:160px;
border-bottom: 1px solid #666666;
overflow:hidden;

#newsBox article:last-child{
border-bottom:none;
}

#newsBox article:after { content: ""; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

.thumbnai{
float:left;
width: 63px;
height: auto;
border-radius:5px;
padding-top:50px;

.thumbnai img{

border-radius:5px;
 
 }

.newstitleArea{
padding-top: 60px;
padding-left: 15px;
overflow: hidden;
box-sizing: border-box;
width:auto;
}

ソースコード


### 試したこと

displayやfloatなど試しましたが、全く動きません。画像の角丸も動作しません。何がおかしいのでしょうか？

### 補足情報（FW/ツールのバージョンなど）

DWのCS4です。

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

回答1件

「時短営業のお知らせ」と「2020.04.24」を横並びにしたい、ということでしょうか?
取り急ぎ、以下で横並びにはなると思います。

CSS
1.newstitleArea .title {
2  display: inline-block;
3}
4.newstitleArea .date {
5  display: inline-block;
6}

追記: CSSのリンクの問題かもしれません。

こちらではCodePenで試して画像の角丸も、画像の右に文字を配置する実装も、実現できました。
CSSファイルが、読み込めていないのが原因ではないか、とも思われます。

試しにHTML側にCSSを貼り付けてみて意図通りに表示されるかを確認し、

CSS
1<style>
2  /* こちらに、CSSを貼り付け */
3</style>

表示されるのならCSSのリンクについて問題がないかを確認してください。

投稿2020/04/25 11:40

編集2020/04/25 11:48

new1ro

総合スコア4528

tatsumori

2020/04/26 05:07

アンサーありがとうございます！しかしやっぱり文字が画像の下に配置され、角丸もできません。。。。。四角い画像テキストのまんまです；；；以前はできていたのですが、うかつにも「なんか余計なcssがあるな」と思い、いじっていたらレイアウトが崩れてしまっていて、、、、、だいぶ前に作成して、いじっていなかったので以前のコードに戻せなくなってたのです；；；