在弹性框容器中将徽标左对齐居中,将文本对齐右对齐

Align logo to the left centered and text to the right in a flexbox container

提问人:Sindre 提问时间:11/15/2023 最后编辑:j08691Sindre 更新时间:11/15/2023 访问量:58

问:

我正在使用 HTML 和 CSS 制作工作列表页面,但我遇到了布局问题。我想在 flexbox 容器中将徽标向左对齐,将职位、公司信息和其他详细信息向右对齐。目前,徽标正在将文本向下推,而不是停留在左侧。

实时网站: https://shorturl.at/gpGSU

这就是我想要的标志https://i.imgur.com/hQF4mpM.jpg Text

.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&amp;action=save&amp;reload=✓" rel="nofollow" href="#"></a>
    </div>
  </div>
</article>

HTML CSS 弹性框 对齐方式

评论

1赞 Paulie_D 11/15/2023
顺便说一句,我建议应该从这开始。media-bodydisplay: flex

答: 暂无答案