提问人:Sindre 提问时间:11/15/2023 最后编辑:j08691Sindre 更新时间:11/15/2023 访问量:58
在弹性框容器中将徽标左对齐居中,将文本对齐右对齐
Align logo to the left centered and text to the right in a flexbox container
问:
我正在使用 HTML 和 CSS 制作工作列表页面,但我遇到了布局问题。我想在 flexbox 容器中将徽标向左对齐,将职位、公司信息和其他详细信息向右对齐。目前,徽标正在将文本向下推,而不是停留在左侧。
实时网站: https://shorturl.at/gpGSU
这就是我想要的标志:https://i.imgur.com/hQF4mpM.jpg
.main-sections__listing__backfill .listing-item,
.main-sections__listing__featured .listing-item,
.main-sections__listing__latest .listing-item,
.search-results.has-refine .listing-item {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
width: 100%;
}
.search-results.has-refine .listing-item {
width: 48%;
}
:not(.my-listings)>.listing-item__jobs {
display: flex;
flex-direction: column;
}
.listing-item__logo .media-object:not(.profile__img) {
max-width: 120px;
max-height: 60px;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.listing-item .media-body {
display: block;
width: 100%;
max-height: 340px;
position: relative;
}
.media-body,
.media-left,
.media-right {
vertical-align: top;
}
.listing-item .listing-item__logo:not(.listing-item__resumes--logo) {
margin-bottom: 12px;
}
.listing-item .listing-item__logo:not(.listing-item__resumes--logo) {
width: 53% !important;
}
.listing-item .media-left,
.listing-item .media-right {
align-self: flex-end;
}
.listing-item__logo {
padding-right: 0;
vertical-align: middle;
display: inline-block;
position: relative;
height: 60px;
}
.listing-item__logo .media-object:not(.profile__img),
.image__fallback {
border-radius: 6px !important;
}
.listing-item__logo .media-object:not(.profile__img) {
max-width: 120px;
max-height: 60px;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.listing-item__title {
margin-bottom: 10px;
color: #6D6F80;
font-size: 16px;
}
.media-heading {
margin-top: 0;
}
.listing-item__info {
color: rgba(109, 111, 128, 0.7);
font-size: 16px;
}
.listing-item__info--item {
font-size: 16px;
line-height: 24px;
color: #011828;
font-weight: 400;
display: inline-block;
margin-right: 12px !important;
}
.listing-item__info--item {
padding-right: 0;
}
.listing-item__info--item:last-child {
margin-bottom: 0;
}
.listing-item__info--item {
font-size: 16px;
line-height: 24px;
color: #011828;
font-weight: 400;
display: inline-block;
margin-right: 12px !important;
}
.listing-item__info--item {
padding-right: 0;
}
.listing-item__desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}
.listing-item__desc {
color: #525865;
font-size: 16px;
font-weight: 400;
line-height: 25px;
margin-top: 16px;
}
.listing-item__desc,
.listing-item__fields {
color: #6D6F80;
}
.listing-item__desc,
.listing-item__fields {
line-height: 24px;
font-weight: 300;
font-size: 16px;
}
.listing-item__footer {
display: none;
}
.listing-item__footer {
display: flex;
flex-grow: 1;
}
.job-type__value {
font-size: 16px;
line-height: 24px;
font-weight: 400 !important;
color: #2f42d8;
background: none;
border: 1px solid #ddd;
border-radius: 1000px;
padding: 6px 10px;
margin: 2px 5px 8px 0 !important;
display: inline-block;
text-align: center;
}
<article class="media well listing-item listing-item__jobs ">
<div class="media-body">
<div class="media-left listing-item__logo">
<a href="https://laerlingplass.no/job/332/it-driftsfag-eller-dataelektroniker-lærling/">
<img class="media-object profile__img-company" src="https://laerlingplass.no/files/pictures/vaga-logo.svg" alt="Vågå kommune">
</a>
</div>
<div class="media-heading listing-item__title">
<a href="https://laerlingplass.no/job/332/it-driftsfag-eller-dataelektroniker-lærling/" class="link">IT-driftsfag eller dataelektroniker-lærling</a>
</div>
<div class="listing-item__info clearfix">
<span class="listing-item__info--item listing-item__info--item-company">
Vågå kommune
</span>
<span class="listing-item__info--item listing-item__info--item-location">
Vågåmo
</span>
</div>
<div class="listing-item__desc">
</div>
</div>
<div class="listing-item__fields">
<div class="table-responsive">
<table>
<tbody>
<tr>
<td colspan="2">
<div class="field-type--multilist">
<span class="job-type__value">
Dataelektronikerfaget </span>
<span class="job-type__value">
IT-driftsfaget </span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="listing-item__footer">
<div class="media-left text-right media-left__date">
<div class="listing-item__date">
</div>
</div>
<div class="media-right text-right listing-item__save">
<a class="save-job" data-toggle="modal" data-target="#apply-modal" data-id="332" title="Lagre" data-href="/saved-jobs/?id=332&action=save&reload=✓" rel="nofollow" href="#"></a>
</div>
</div>
</article>
答: 暂无答案
评论
media-body
display: flex