在我的信息右侧获取图像

Question

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

示例：

我不断让图像在数据之间、下方或上方结束。我就是不知道如何把它放到运行旁边。我试着做右对齐等，但它似乎仍然不起作用。我知道这是一张需要调整大小的大图片。这不是问题，它正在获取信息的右侧！

这是我的代码：

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

在我的信息右侧获取图像

Get an image to the right hand side of my information

html

css

viewpage

razor