在 div 内内联显示图像 + 文本答案

【问题标题】：Display image + text inline inside a div在 div 内内联显示图像 + 文本
【发布时间】：2017-10-14 15:52:21
【问题描述】：

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

#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 中消失，如果我放 float: 对；对于文本，相同。有人可以帮我吗？

【问题讨论】：

标签： html css image text

【解决方案1】：

#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>

【讨论】：

【解决方案2】：

试试这个：

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

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

img {
    float: left;
}

<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>

【讨论】：