Question

显示的行应为图像和文本，而不是文本显示在图像下方。

<div style="display: inline-block;">
  <img src="imgSource" alt="img">
  <div style="display: inline-block;">imgText</div>
</div>

<div style="display: inline-block;">
  <img src="imgSource" alt="img">
  <div style="display: inline-block;">imgText</div>
</div>

<div style="display: inline-block;">
  <img src="imgSource" alt="img">
  <div style="display: inline-block;">imgText</div>
</div>

已编辑，有时一切正常，有时则不然，首先包含<div>总是有效。

Answer 1

<div >
    <label for="photo">Photo</label>
     <img id="photoPrev" src="" height="50" width="50"/>
</div>

Answer 2

<div style="display: inline-block;">
 <img src="imgSource" alt="img" style="float:left;">
 <div style="display: inline-block; float:left;">imgText</div>
</div>

Answer 3

HTML5功能怎么样？

<figure>
  <img src="imgSource" alt="alt">
  <figcaption style="display:inline-block;">imgText</figcaption>
</figure>

Answer 4

您需要做的就是将这种CSS样式添加到您的页面

<style>
img {
vertical-align: middle;
}
</style>

然后将img加载为

<div>
<img src="imgSource" alt="img">
text-image
</div>

所有这些都会加载带文字的图片

Answer 5

我知道您在预览时只会遇到几次问题。我没有看到任何问题。

尝试添加清除：两者

<div style="display: inline-block;clear:both">
 <img src="imgSource" alt="img">
 <div style="display: inline-block;">imgText</div>
</div>

<div style="display: inline-block;clear:both">
 <img src="imgSource" alt="img">
 <div style="display: inline-block;">imgText</div>
</div>

<div style="display: inline-block;clear:both">
 <img src="imgSource" alt="img">
 <div style="display: inline-block;">imgText</div>
</div>

上面的图像显示在同一行上

5 个答案: