Html 将元素与视口的右边缘对齐

我在div中有两个图像，因此它们并排显示

如何将第二个图像（值）向右对齐，使其与右边缘对齐？目前，第二张图片右侧有空格

Jsfiddle：

.wrapper{
宽度：820px；
}
.容器-2col-nm{
显示器：flex；
证明内容：中心；
}
.容器-2col-nm>div{
保证金：0；
填充：0；
文本对齐：左对齐；
}
.box-2col-nm-1{
宽度：50%；
}
.box-2col-nm-2{
宽度：50%；
}

从代码中删除

文本对齐：左

。这是一个默认值，它将每个flex项的内容保持在左侧

只需给第二个项目

text align:right

.container-2col-nm{
显示器：flex；
证明内容：中心；
}
.容器-2col-nm>div{
保证金：0；
填充：0；
/*文本对齐：左对齐*/
}
.container-2col-nm>div:最后一个孩子{
文本对齐：右；/*新*/
}
.box-2col-nm-1，
.box-2col-nm-2{
宽度：50%；
}
.包装纸{
宽度：820px；
}

这是你想要的吗？检查示例

        //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;

                }

//只需在图像中添加一个类
//并设置一些css规则
里姆先生{
显示：块；
浮动：对；
}

---

将

img

推向右侧的一种解决方案可以是

位置：绝对

，并且

右侧

偏移量为0，例如

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

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

这样做的缺点是，

img

不再是文档流的一部分

修改了一种灵活的方法：

.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%;  }
*/

.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 */

---

另一个flex方法：

.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%;  }
*/

.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 */

---

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