在div中显示内嵌图像+文本

Question

我正在制作一个页面，其中我有一个带文字的图像：

#imggame {
	border:  2px solid #EEEEEE;
	padding: 15px;
	border-radius: 15px;
	margin-right: 100px;
}

<h2>Music Maker & Mixer (M3)</h2>
<div id="imggame">
<img src="images/costume4.png" width="220px" height="220px">
<p>Make music, mix and remix! With M3 you have a lot of ways to create your 
music, record songs, use your voice and changing it to instruments... And 
this all with the better quality! Download now, and share your songs!</p>
</div><br>

文本显示在图像的底部，但我想知道如何将文本放在图像旁边，内联。如果我让图像浮动：左;它离开了div，如果我放浮动：对;对于文本，同样的。有人能帮助我吗？

Answer 1

试试这个：

＆＃13;

＆＃13;

#imggame {
    border:  2px solid #EEEEEE;
    padding: 15px;
    border-radius: 15px;
    margin-right: 100px;
}

#imggame:after {
    content: '';
    display: block;
    clear: both;
}

img {
    float: left;
}

＆＃13;

<h2>Music Maker & Mixer (M3)</h2>
<div id="imggame">
<img src="images/costume4.png" width="220px" height="220px">
<p>Make music, mix and remix! With M3 you have a lot of ways to create your 
music, record songs, use your voice and changing it to instruments... And 
this all with the better quality! Download now, and share your songs!</p>
</div><br>

＆＃13;

＆＃13;

＆＃13;

Answer 2

#imggame {
  border:  2px solid #EEEEEE;
  padding: 15px;
  border-radius: 15px;
  margin-right: 100px;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.img-wrap{
  float:left;
  width:20%;
  margin-right:2%;
}
.desc{
  float:right;
  width:75%;
}
.desc p{
  margin-top:0;
}
.clear{
  clear:both;
}

<h2>Music Maker & Mixer (M3)</h2>
<div id="imggame">
  <div class="img-wrap">
    <img src="https://dummyimage.com/200x200/000/fff" width="220px" height="220px" alt="" />
  </div>
  <div class="desc">
    <p>Make music, mix and remix! With M3 you have a lot of ways to create your 
    music, record songs, use your voice and changing it to instruments... And 
    this all with the better quality! Download now, and share your songs!</p>
  </div>
  <div class="clear"></div>
</div>