在我的信息右侧获取图像

Question

我一直在尝试将图像放在正在显示的信息的右侧。

示例：

我不断将图像置于数据之间、下方或上方。我只是不知道如何让它一起运行。我试图做 align right 等，但它似乎仍然不起作用。我知道这是一个需要调整大小的大图像。这不是问题，它是在信息的右边！

这是我的代码：

<div class="card shadow p-4 mt-4">

  <div>
    <a asp-action="CreateAppointment" asp-route-id="@Model.Id" class="btn btn-success"> Create Appointment </a>
    <!-- add navigation link to Details action, passing the correct route id parameter -->
    <a class="btn btn-secondary" asp-controller="Patient" asp-action="Edit" asp-route-id=@Model.Id>Edit</a>
    <!-- add navigation link to Delete action, passing the correct route id parameter -->
    <a class="btn btn-danger" asp-controller="Patient" asp-action="Delete" asp-route-id=@Model.Id>Delete</a>
  </div>

  <br />

  <dl class="row">
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Title)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Title)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Name)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Name)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Gender)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Gender)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.MedicalNumber)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.MedicalNumber)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.DateOfBirth)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.DateOfBirth)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.EmailAddress)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.EmailAddress)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.PhoneNumber)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.PhoneNumber)
    </dd>
    <dt class="col-sm-2">
      @Html.DisplayNameFor(model => model.Address)
    </dt>
    <dd class="col-sm-10">
      @Html.DisplayFor(model => model.Address)
    </dd>
  </dl>
</div>

我要开始工作的代码：

<div>
  <img src="~/css/Images/logo.jpeg" class="img-fluid" align="right">
</div>

Answer 1

你只需要用按钮包装你的数据 div 并用一个 div 列出列表，并将图像作为该 div 的兄弟，之后，.card div 应该设置为 display:flex;

检查：

div{
  border:1px dotted black;
  margin:1em;
}
.flex-div{
  
  display:flex;
  flex-direction:row;

}

<div class="normal">
  <div>Your normal div</div>
  <div>Your image div</div>
</div>

<div class="flex-div">
  <div>Your normal div</div>
  <div>Your image div</div>
</div>