浮动两个图像

Question

我有这段代码

＆＃13;

＆＃13;

.container {
    background-color: #ececec;
    width: 100%;
}

＆＃13;

<div class="container">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x100">
</div>

＆＃13;

＆＃13;

＆＃13;

我希望第一张图片位于.container左侧，第二张图片位于右侧。

这些图片必须居中，我不想使用flexblox（我听说像IE这样的兼容性问题）

感谢您的回答！

Answer 1

您可以使用表格。

＆＃13;

＆＃13;

.container {
  background-color: #ececec;
  width: 100%;
  display: table;
}
.img-container {
  display: table-cell;
  vertical-align: middle;
}
.image2 {
  text-align: right;
}

＆＃13;

<div class="container">
  <div class="img-container">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="img-container image2">
    <img src="http://placehold.it/150x100">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

喜欢这个？ https://jsfiddle.net/rfb31uto/

.container {   
    background-color: #ececec;
    width: 100%;
}
img{vertical-align: middle;}
img:nth-child(2) {
    margin-left: calc(100% - 305px);
}