无法使用浮动并排显示图像和文本答案

【问题标题】：Not able to display image and text side by side using float无法使用浮动并排显示图像和文本
【发布时间】：2015-07-15 15:45:13
【问题描述】：

我想并排显示图像和文本（左侧图像和右侧文本（使用排序）。

我在 Visual Studio 的 .html 页面中实现了这一点

对于图像 div，我给了 float: left，对于文本 div，我给了 float:right

我想通过将 html 页面代码传递给字符串变量并在 WebBrowser 中显示输出来实现相同的目的。

例如：

string html= @"<div style=""float:left"">
        <img src=""smiley.jpg"" alt=""smiley"" />
        <div style=""float:right;font-family:Calibri"">
            <h2>Dispalying Image and text</h2>           
        </div>
    </div>"

webBrowser1.DocumentText = html;

但是在这里，图像和文本不是并排显示的，而是文本显示在下一行。 Float:right 在这里没有按预期工作。如何解决？

【问题讨论】：

divs 自动换行。我建议将图像放在文本 div 中，或者将文本 div 更改为跨度
通过将图像放在一个 div 中，将文本放在一个 div 中，并将两个 div 放在一个 div 中，我得到了预期的输出。它有效:) 就像，

text

标签： c# html css

【解决方案1】：

你可以这样做：

<div style="float:left">
  <img style="display:inline-block;vertical-align:middle" src="http://www.smilys.net/lachende_smilies/smiley7702.jpg" alt="smiley" />
  <div style="display:inline-block;font-family:Calibri">
    <h2>Dispalying Image and text</h2>           
  </div>
</div>

【讨论】：

【解决方案2】：

<img> 是内联元素，<div> 和 <h2> 是块元素，您将两者混合在一起。而且，您不能将“float”设置为内联元素。

也许你可以试着把img放进去，像这样：

<div>
    <div style=""font-family:Calibri"">
        <h2>
            <img src=""smiley.jpg"" alt=""smiley""/>
            Dispalying Image and text
        </h2>
    </div>
</div>

这对这个问题的看法有点不同，但是真的很简单，没有任何额外的样式。

【讨论】：

将<img> 放入<h2> 并不是一个好工作。最好将<img> 的display 属性更改为inline-block，就像我的回答中一样
是的，inline-block 也是可能的解决方案，我正在写的是更“原生”的 HTML 用法，内联块用作内联。您可以看到，我不需要任何其他样式属性。
正如我提到的将<img> 放入<h2> 并不是一个好习惯。你最好不要这样做
为什么？我知道，有很多情况，inline-block 最好的方法在哪里，但在这种情况下呢？你能解释一下为什么这不是一个好的做法吗？在这样的问题中 - 我没有看到您的解决方案的优势
标签的内容应该是“短语内容”，其中也包括标签，因此它不是无效的，但正如我所说，这不是一个好习惯，因为它有 SEO缺点。您可以谷歌它以获取更多信息

【解决方案3】：

如果你想把你的图片放在左边，把文字放在右边你做得很好，只需将 float:left 样式分配给图片而不是主块，例如：

string html= @"<div>
        <img src=""smiley.jpg"" alt=""smiley"" style=""float:left""/>
        <div style=""float:left;font-family:Calibri"">
            <h2>Displaying Image and text</h2>           
        </div>
    </div>"

【讨论】：

【解决方案4】：

通过将图像放在一个 div 中，将文本放在一个 div 中，并将 div 放在一个 div 中，我得到了预期的输出。有效：）喜欢，

<div>
<div><img></div>
<div>text</div>
</div>

【讨论】：

【解决方案5】：

你可以用一张桌子。

<table>
    <tr>
        <td> <img src="smiley.jpg" alt="smiley"/> </td>
        <td> Displaying Image and text </td>
    </tr>
</table>

【讨论】：

标签的内容应该是“短语内容”，其中也包括 标签，因此它不是无效的，但正如我所说，这不是一个好习惯，因为它有 SEO缺点。您可以谷歌它以获取更多信息

标签的内容应该是“短语内容”，其中也包括标签，因此它不是无效的，但正如我所说，这不是一个好习惯，因为它有 SEO缺点。您可以谷歌它以获取更多信息