如何阻止文本环绕图像？

Question

我需要阻止文字环绕图像。无论我尝试什么，文本都会显示在图像的右侧并环绕到底部。它需要全部在图像下。我试过将图像和文本分开 <div>，尝试将 <img> 和 <div> 都设置为 display: block，尝试在 <br> 之间放置一个 <br>图片和文字，其中 none 有效。文本保留在原处。我错过了什么？

这是整个页面：

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

Answer 1

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

P.S。我喜欢你的网站项目:).

如何阻止文本环绕图像？

How to stop text from wrapping around an image?

html

css

word-wrap