html - 多个元素的 css 中的垂直对齐(如何实现此布局)

Question

在 CSS3 中我一直苦恼的一件事是布局。我读过这篇博文 - http://www.toptal.com/css/css-layout-primer-from-classic-approaches-to-the-latest-techniques - 它对过度布局技术很有帮助。但是，当向下移动到特定元素时，我变得有点卡住了。我是一名后端开发人员，所以这不是我的专业领域。

例如鉴于上图，页面上有一行又一行。理想的 div 结构应该是什么，什么 SASS/CSS 会很好地匹配。

<div class="container">   
  <div class="team1"> Vasco </div>  
  <div class="logo1"> <img>logo image</img> </div>   
    <div class="status"> Finished </div>
  <div class="logo2"> <img>logo image</img> </div> 
  <div class="team2"> flamengo </div> 
</div>

我玩过上面的 div 结构和 float 、内联 block 等的混合...但我现在有点无能为力。同样，我可以将其更改为 span 或任何需要的内容。

Answer 1

为了完整起见，我将加入一个 flexbox 变体。

.container {
  display: flex;
  background: #eee;
  justify-content: space-beteeen;
  align-content: center;
}
.container > div {
  flex: 1 0 auto;
  padding: 5px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container .team {
  width: 25%;
  font-size: 150%;
  font-weight: bold;
}
.container .team:first-child {
  text-align: right;
}
.container .team:last-child {
  text-align: left;
}
.container .logo {
  width: 15%;
}
.container > div img {
  display: block;
  max-width: 100%;
}

<div class="container">
  <div class="team">Vasco</div>
  <div class="logo">
    <img src="http://placehold.it/1000x750" />
  </div>
  <div class="status">Finished</div>
  <div class="logo">
    <img src="http://placehold.it/1000x750" />
  </div>
  <div class="team">flamengo</div>
</div>

JSfiddle Demo