Question

我将为上下文包含一个图像，然后是代码：

最右边的方框中有“ABC”和左/下边框正在撞到它旁边的渐变图像高度的一半。我知道很多高度/等没有意义，但我已将它们全部删除，问题仍然存在。这里有什么指导？

HTML：

<div className="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" className="thingImage" />
  <div className="content">
    <span className="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span className="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div className="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" className="thingIcon" />
    <span className="thingAbbrev">ABC</span>
  </div>
</div>

（“className”来自React，如果您不熟悉React，只需将其读作“class”）

CSS：

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;

}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  align-self: flex-start;
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}

这个项目对我来说主要关注的是学习React，使用Flexbox对我来说只是一个奖励。在此先感谢，非常感谢任何帮助或指导！

Answer 1

您需要设置以下CSS和html

<强> CSS：

.vcenter{
  display: flex;
  align-item: center;
  justify-content: center;
}

此外，我将<span class="thingAbbrev">ABC</span>包裹在另一个范围内以消除由于边距导致的高度问题。

<强> HTML：

  <div class="thingMeta vcenter">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="vcenter"><span class="thingAbbrev">ABC</span></span>
  </div>

JSFiddle：here

Answer 2

由于thingMeta不是灵活容器（没有display: flex; ^（1）），thingAbbrev不是灵活项目因此align-self: flex-start赢了。

由于img中的span和thingMeta是正常的内嵌元素，它们会沿着基线对齐，因此添加vertical-align: top会将它们对齐在顶部。< / p>

＆＃13;

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;
}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  /* align-self: flex-start;               removed  */
  vertical-align: top;                /*   added    */
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}

＆＃13;

<div class="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
  <div class="content">
    <span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span class="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div class="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="thingAbbrev">ABC</span>
  </div>
</div>

＆＃13;

另外，您当然也可以简单地将display: flex添加到thingMeta。这样的缺点是你的img然后变成了一个灵活项目，根据你想要用它做什么，有一些跨浏览器问题，并且可以通过包装img来避免其中许多问题（我没有在下面的样本中）

＆＃13;

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;
  display: flex;                      /*   added    */
}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  align-self: flex-start;
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}

＆＃13;

<div class="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
  <div class="content">
    <span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span class="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div class="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="thingAbbrev">ABC</span>
  </div>
</div>

＆＃13;

^（1） 在元素上设置display: flex时，只有子元素成为弹性项目

Flex项目正好比前一项

2 个答案: