html - 将元素对齐到视口(viewport)的右边缘

Question

我在 div 中有两张图片，因此它们并排显示。

如何将第二张图片(The Value)向右对齐，使其与右边缘对齐？目前第2张图右边有空格

J fiddle : https://jsfiddle.net/huskydawgs/ksq1ajsa/1/

.wrapper {
  width: 820px;
}

.container-2col-nm {
  display: flex;
  justify-content: center;
}

.container-2col-nm>div {
  margin: 0;
  padding: 0;
  text-align: left;
}

.box-2col-nm-1 {
  width: 50%;
}

.box-2col-nm-2 {
  width: 50%;
}

<div class="wraper">
  <div class="container-2col-nm">
    <div class="box-2col-nm-1">
      <img height="200" src="http://www.onvia.com/sites/default/files/promo_the_experience.png" width="350"></div>
    <div class="box-2col-nm-2">
      <img height="200" src="http://www.onvia.com/sites/default/files/icon_careers_the_value_350x200.png" width="350"></div>
  </div>
  <p><img alt="Find Opportunities" height="86" src="http://www.onvia.com/sites/default/files/test_banner_more_info.png" width="720"></p>

</div>

Answer 1

从您的代码中删除 text-align: left。这是一个默认值，它将每个 flex 元素的内容保持在左侧。

只给第二项text-align: right。

.container-2col-nm {
  display: flex;
  justify-content: center;
}

.container-2col-nm > div {
  margin: 0;
  padding: 0;
  /* text-align: left; */
}

.container-2col-nm > div:last-child {
  text-align: right; /* new */
}

.box-2col-nm-1,
.box-2col-nm-2 {
  width: 50%;
}

.wrapper {
  width: 820px;
}

<div class="wraper">
  <div class="container-2col-nm">
    <div class="box-2col-nm-1">
      <img height="200" src="http://www.onvia.com/sites/default/files/promo_the_experience.png" width="350"></div>
    <div class="box-2col-nm-2">
      <img height="200" src="http://www.onvia.com/sites/default/files/icon_careers_the_value_350x200.png" width="350"></div>
  </div>
  <p><img alt="Find Opportunities" height="86" src="http://www.onvia.com/sites/default/files/test_banner_more_info.png" width="720"></p>

</div>