Flex box 很棒，但我的这个解决方案对于我目前面对的浏览器来说太先进了。
有什么好的替代方案，还和这个一样崩溃？
示例:http://jsfiddle.net/a23z05te/
img.box {
border:0;
width:100%;
height:100%;}
#team {
max-width:100%;
width:100%;
height:auto;
margin:0 auto;
background-color:white;
box-sizing:border-box;
padding:0;
display:-webkit-flex;
display:flex;
-webkit-align-items:inherit;
align-items:inherit;
-webkit-justify-content:center;
justify-content:center;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-align-content:flex-end;
align-content:flex-end;
}
#team:hover {
cursor: helpX;
}
figure {
box-sizing:content-box;
display:block;
margin: 0.5rem 0.1rem .1rem;
padding:0;
}
#team figure img {
-webkit-transition:opacity 0.26s ease-out;
-moz-transition:opacity 0.26s ease-out;
-ms-transition:opacity 0.26s ease-out;
-o-transition:opacity 0.26s ease-out;
transition:opacity 0.26s ease-out;
width:158px;
}
#team:hover img, #team:active img {
opacity:0.3;
cursor: pointer;
}
#team:hover img:hover, #team:active img:active {
opacity:1;
}
figcaption {
color: #fff;
font-size: 0.9rem;
margin-top: -26px;
text-align: center;
}
</style>
HTML
<html>
<div id="team">
<figure id="switch1">
<img class="box" src="http://www.wrededesigntest.com/testing/wp-content/uploads/2014/11/leading_teams_box.png" alt="" />
<figcaption>leading teams</figcaption>
</figure>
<figure id="switch2">
<img class="box" src="http://www.wrededesigntest.com/testing/wp-content/uploads/2014/11/serving_customers_box.png" alt="" />
<figcaption>serving customers</figcaption>
</figure>
<figure id="switch3">
<img class="box" src="http://www.wrededesigntest.com/testing/wp-content/uploads/2014/11/building_brands_box.png" alt="" />
<figcaption>building brands</figcaption>
</figure>
<figure id="switch4">
<img class="box" src="http://www.wrededesigntest.com/testing/wp-content/uploads/2014/11/innovative_leadership_box.png" alt="" />
<figcaption>innovative leadership</figcaption>
</figure>
<figure id="switch5">
<img class="box" src="http://www.wrededesigntest.com/testing/wp-content/uploads/2014/11/disciplined_execution_box.png" alt="" />
<figcaption>disciplined execution</figcaption>
</figure>
<figure id="switch6">
<img class="box" src="http://www.wrededesigntest.com/testing/wp-content/uploads/2014/11/authentic_inspiration_box.png" alt="" />
<figcaption>authentic inspiration</figcaption>
</figure>
</div>
</html>
最佳答案
显示 inline-block 应该在你的“数字”上工作，然后只需将 #team div 文本对齐居中
我在这里更新了你的 fiddle :http://jsfiddle.net/a23z05te/2/
关于css - flex 盒替代方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27515900/