※ ChatGPTを利用し、要約された質問です（原文：htmlについて）
HTMLでスマホ画面の際に画像を横に表示したい方法
このQ&Aのポイント
HTMLのコードを使って、スマホ画面の際に画像を右横に表示する方法を教えてください。
CSSを使って、スマホ画面の際に画像をテキストの横に表示させる方法を教えてください。
HTMLとCSSを組み合わせて、スマホ画面での画像とテキストの表示方法を教えてください。
このコードでスマホ画面の際、画像を右横に表示しテキストを画像の真横に表示させたいのですが、どうすればいいですか？
<div class="parent">
<div class="child"><img src="image/t1.png"><p class="text">あ</p></div>
<div class="child">い</div>
<div class="child">う</div>
<div class="child">え</div>
<div class="child">お</div>
</div>
以下css
div {
font-size: 2rem;
text-align: center;
margin: 10px;
padding: 10px;
}
.parent {
background: lightblue;
display: flex;
}
.child {
background: lightgreen;
width: 150px;
}
.child>img
{
width:100%;
}
@media screen and (max-width: 800px) {
.parent {
flex-wrap: wrap;
}
}
@media screen and (max-width: 400px) {
.parent {
display: block;
float:right;
}
}
