在我的信息右側獲取圖像

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>