如何阻止文本环绕图像？

大佬教程收集整理的这篇文章主要介绍了如何阻止文本环绕图像？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何阻止文本环绕图像？？

我需要阻止文字环绕图像。无论我尝试什么，文本都会显示在图像的右侧并环绕到底部。它需要全部在图像下。我尝试将图像和文本放在单独的 <div> 中，尝试将 <img> 和 <div> 设置为 display: block，尝试将 <br>图像和文本，但没有一个起作用。文本保持原样。我错过了什么？

这是整个页面：

@model web2.ModelS.User

<style>
    .user-image-container {
        height: unset;
        display:block;
    }
    div {
        display: block;
    }
</style>

@{
    VIEwBag.title = "Index";
}

<h2>Index</h2>

<div>
    <img src="/wapp2-smithe/Content/Images/Ethan Pic.jpg" 
      alt="An awesome picture of Ethan" class="user-image-container">
</div>

<br>

@using (HTML.beginForm(FormMethod.Post))
{
    <div>
        <ul>
            <li>First name: @model.Firstname </li>
            <li>last name: @model.Lastname  </li>
            <li>Email Address: @model.Email </li>
        </ul>
    </div>

    <div class="section">
        <button type="submit" value="more" name="btnMore" ID="More">
            <i class="far fa-info-circle" ?></i></button>
        <button type="submit" value="close" name="btnClose" ID="Close">
            <i class="fa fa-times"></i></button>
    </div>

}

.user-image-container {
  height: unset;
  display: block;
}

div {
  display: block;
}

<h2>Index</h2>

<div>
  <img src="https://via.placeholder.com/100" alt="An awesome picture of Ethan" class="user-image-container">
</div>

<br>
<div>
  <ul>
    <li>First name: @model.Firstname </li>
    <li>last name: @model.Lastname </li>
    <li>Email Address: @model.Email </li>
  </ul>
</div>

<div class="section">
  <button type="submit" value="more" name="btnMore" ID="More"><i class="far fa-info-circle" ?></i>More</button>
  <button type="submit" value="close" name="btnClose" ID="Close"><i class="fa fa-times"></i>Close</button>
</div>

解决方法

大佬总结

以上是大佬教程为你收集整理的如何阻止文本环绕图像？全部内容，希望文章能够帮你解决如何阻止文本环绕图像？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。