如何解决在我的信息右侧获取图像
我一直在尝试将图像放在我正在显示的信息的右侧。
示例:
我不断地让图像出现在数据之间、下方或上方。我只是不知道如何让它并排运行。我试图做正确对齐等,但它似乎仍然不起作用。我知道这是一个需要调整大小的大图像。这不是问题,重要的是将其置于信息的正确位置!
这是我的代码:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。