使用浮动时不能并排显示图像和文本

本文关键字：显示图 显示 图像 文本 不能 | 更新日期: 2023-09-27 18:02:41

我想将图像和文本并排显示(图像在左侧，文本在右侧(使用排序))

我在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在这里没有按预期工作。如何解决这个问题?

使用浮动时不能并排显示图像和文本

你可以这样做:

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

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

也许你可以试着把img放在里面，像这样:

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

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

如果你想把图片放在左边，文字放在右边你就可以把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>"

我已经得到了预期的输出通过放置图像在一个div和文本在一个div和两个div在一个div。它工作:)如,

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

您可以使用表格。

<table>
    <tr>
        <td> <img src="smiley.jpg" alt="smiley"/> </td>
        <td> Displaying Image and text </td>
    </tr>
</table>
相关文章：