将元素对齐到视口的右边缘

Question

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

如何将第二张图片（The Value）向右对齐，使其与右边缘对齐？目前第2张图右边有space

Jsfiddle： 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。这是一个默认值，它将每个弹性项目的内容保持在左侧。

就给第二项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>

Answer 2

是你想要的吗？检查示例

        //Just add a class to image
            <img class="rimg" height="200" src="http://www.onvia.com/sites/default/files/icon_careers_the_value_350x200.png" width="350">

        // and set some css rules
            .rimg {
                  display: block;
                  float: right;

                }

the example

Answer 3

将 img 向右推的一个解决方案可以是 position: absolute 并且 right 偏移量为 0，例如

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

.box-2col-nm-2 img {
    position: absolute;
    right: 0;
}

这样做的缺点是，img 将不再是文档流的一部分。

已修改 Jsfiddle

Answer 4

一种弹性方法：

.container-2col-nm {
    display: flex;
    justify-content: space-between; /* value changed from `center` */
}

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

DEMO 1

另一种弹性方法：

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

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

div.box-2col-nm-2 {
    /* width: 50%; */
    margin-left: auto;
}

/* div selector added to provide enough specificity to override another margin rule */

DEMO 2

有关这些方法和其他选项的说明，请参阅：

将元素对齐到视口的右边缘

Align element to right edge of viewport

html

css

flexbox