Question

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

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

的jsfiddle： https://jsfiddle.net/huskydawgs/ksq1ajsa/1/

这是我的HTML：

    <div class="wrapper">
<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>

这是我的css：

.wrapper {
     width: 720px;

}

.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%;
    text-align: right;
}

Answer 1

解决此问题的一种简单方法是将.container-2col-nm > div从.container-2col-nm > div { margin: 0; padding: 0; } .box-2col-nm-1 { width: 50%; text-align: left; } .box-2col-nm-2 { width: 50%; text-align: right; }移至每个特定的div。

所以：

.container-2col-nm > div

第一堂课.box-2col-nm-2的特异性水平高于text-align: right，因此它会覆盖//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; }。

Answer 2

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

find_package(Boost 1.40.0 ${QUIET_} COMPONENTS system filesystem thread date_time iostreams serialization chrono)

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

有关这些方法和其他选项的说明，请参阅：Methods for Aligning Flex Items

将第二列div对齐到右边缘

4 个答案: