如何阻止文本环绕图像？答案

【问题标题】：How to stop text from wrapping around an image?如何阻止文本环绕图像？
【发布时间】：2021-04-27 08:01:07
【问题描述】：

我需要阻止文字环绕图像。无论我尝试什么，文本都会显示在图像的右侧并环绕到底部。它需要全部在图像下。我尝试将图像和文本放在单独的<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>

【问题讨论】：

从运行的 sn-p 中可以看出，您没有证明问题。看看你能不能纠正这个问题，以便我们提供帮助。
@isherwood 我不确定有什么需要纠正的。这是指向实际页面的链接，因此您可以看到它不起作用。 itd1.cincinnatistate.edu/WAPP2-MalloyE/AboutUs/Index

标签： html css word-wrap

【解决方案1】：

我找到了问题所在。 img 上的“float:left”（css 样式）导致了问题。我发现的方法是简单地通过打开和关闭来检查你的 CSS 中的每一个样式属性。因此，删除 css 中的 float: left 行，问题将得到解决。

附：我喜欢你的网站项目:)。

【讨论】：