Выровнять второй столбец div до правого края

Question

У меня есть два изображения в divs, поэтому они показаны бок о бок.

Как выровнять второе изображение (значение) вправо, чтобы оно совпало с правым краем? В настоящее время имеется пространство справа 2-го изображения

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

Простой способ исправить это было бы перемещение text-align от .container-2col-nm > div к каждому из конкретных 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; 
} 

Первый класс, .container-2col-nm > div, имеет более высокий уровень специфичности, чем .box-2col-nm-2, так что переопределение text-align: right.

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

---

Для объяснения этих методов, а также дополнительные опции, см: Methods for Aligning Flex Items