Question

Flex框非常棒，但我现有的解决方案对于我目前面临的浏览器来说太先进了。

什么是一个好的替代方案，仍然会崩溃？

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>

Answer 1

显示inline-block应该适用于您的＆＃34;数字＆＃34;然后只是文本对齐中心#team div

我在这里更新了你的小提琴：http://jsfiddle.net/a23z05te/2/

Flex-box替代方案

1 个答案: