代码之家 › 专栏 › 技术社区 › Mike Waldrup

弹性物品被撞倒,正好是前一件物品的一半高度

vertical-alignment flexbox css

Mike Waldrup · 技术社区 · 7 年前

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”)

.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对我来说只是一个额外的好处。提前感谢,非常感谢您的帮助或指导!

2 回复 | 直到 7 年前

Asons Oliver Joseph Ash 7 年前

thingMeta 不是flex容器(没有 display: flex; ),则 thingAbbrev align-self: flex-start 不适用。

作为 img 和 span 在是正常的内联元素,它们沿基线对齐,即添加 vertical-align: top 将在顶部对齐。

.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;
}

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

display: flex 到 thingMeta公司 . 这样做的缺点是 img公司 (我在下面的示例中没有)

.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;
}

<<img src=”https://unsplash.it/75/90/?blur“alt=“hey there”class=“thingImage”/>
<div class=“content”>
<span class=“thingName”>Jibber Jabb这里有一部电影或东西的超长标题</span>&书信电报;br/>
<span class=“thingRanks”>
Rank2:2<br/>
等级3:2
</span>
<div class=“thingMeta”>
<img src=”https://unsplash.it/30/30/?blur“alt=”name“class=”thingIcon“/>
<span class=“thingAbbrev”>ABC</span>
</div>

⁽¹⁾ 设置在元素上,只有其子元素才成为弹性项

Naren Murali 7 年前

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>

here