小编n12*_*234的帖子

我在弹性容器的右侧项目上有一个图像。正如您在codepen中看到的那样，扩展屏幕时会出现间隙（由图像上的最大宽度引起，这是不可避免的）。

然而，我只是想将该图像移动到最右侧，因此间隙不那么明显。

这个需要对IE11友好，图片需要响应式。如果可能的话，我想避免在图像上使用浮动（我会认为有一种更干净的方法可以使用 Flexbox 来实现此目的）？

HTML：

<div class="container">
  <div class="image">
    <img src="http://www.stevensegallery.com/1000/1400">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
  </div>
</div>

CSS：

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
}
.container > .image {
  flex: 1 0 0%;
}
.image > img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}
.container > .text {
  flex: 2 0 0%;
}

代码笔： https: //codepen.io/neilem/pen/zjpXKZ

我有一个装有 3 张卡片的弹性盒容器，我正在尝试弄清楚如何使卡片具有相同的高度，但我没有取得太大成功（尝试改变方向，flex-direction: column;但没有成功）。

这需要对 IE11 友好。希望我目前所拥有的一切都是正确的（CSS 世界里的新手）。

代码笔： https: //codepen.io/neilem/pen/dejmRQ

#container {
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-around;
  padding: 5% 5%;
}

.card {
  text-align: center;
  border: 1px solid black;
  width: 31.33333%;
  margin: 1%;
}

#container>.card>.card-image>img {
  display: block;
  width: 100%;
}

<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. …