在我的信息右侧获取图像

问题描述

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

示例：

我不断地让图像出现在数据之间、下方或上方。我只是不知道如何让它并排运行。我试图做正确对齐等，但它似乎仍然不起作用。我知道这是一个需要调整大小的大图像。这不是问题，重要的是将其置于信息的正确位置！

这是我的代码：

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

解决方法

你只需要用按钮包裹你的数据 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>