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

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

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>
2
user3075987 30 Дек 2015 в 02:53

4 ответа

Лучший ответ

Удалите 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>
3
Michael Benjamin 24 Окт 2019 в 14:24

Один метод гибкости:

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

ДЕМО 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 */

ДЕМО 2


Объяснение этих методов и дополнительных параметров см .: Методы выравнивания элементов Flex .

0
Community 23 Май 2017 в 11:59

Одним из решений сдвинуть img вправо может быть position: absolute и иметь смещение right, равное 0, например

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

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

Недостатком этого является то, что img больше не будет частью потока документов.

Измененный Jsfiddle

0
Olaf Dietsche 30 Дек 2015 в 00:09

Вы этого хотите? проверьте пример

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

                }

пример

0
Rolly 30 Дек 2015 в 00:03