将图像与flex容器

Question

我有以下HTML位，由于某种原因，文本显示在图像下方而不是旁边

以下是它的样子：

＆＃13;

＆＃13;

.fbstats {
  font-size: 12px;
}

.fbstats .likeimg {
  width: 20px;
}

＆＃13;

          <div class="card-action" layout="row">
            <div class="fbstats" layout="column" layout-align="right start" flex="50">
              <img class="likeimg" src="img/like.png" /> 126
            </div>
            <div layout="column" flex="50" layout-align="left end">
              <a href="#">צפה בפוסט</a>
            </div>
          </div>

＆＃13;

＆＃13;

＆＃13;

最终结果如下：

我尝试使用vertical-align和display: inline-flex，但没有用。

Answer 1

Divs默认显示一个块，导致它们转到前一个块的底部。检查一下：

.card-action > div {
    display: inline-block;
}

Answer 2

尝试将display:flex添加到容器中，如下所示：

.card-action {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fbstats {
  font-size: 12px;
}

.fbstats .likeimg {
  width: 20px;
}

<div class="card-action" layout="row">
  <div class="fbstats" layout="column" layout-align="right start" flex="50">
    <img class="likeimg" src="img/like.png" /> 126
  </div>
  <div layout="column" flex="50" layout-align="left end">
    <a href="#">צפה בפוסט</a>
  </div>
</div>