我在 div 中有两个图像,因此它们并排显示。
如何将第二个图像(值)向右对齐,使其与右边缘对齐?目前第二张图片右侧有空间
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>
最佳答案
从代码中删除 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>
关于html - 将元素与视口(viewport)的右边缘对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34520981/