플렉스 박스 대체품

플렉스 박스는 훌륭하지만, 현재 가지고있는 브라우저에 비해이 솔루션은 너무 앞서 있습니다.플렉스 박스 대체품

아직도 붕괴되는 좋은 대안은 무엇입니까?

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>

출처

2014-12-16 wrede66

감사합니다 -이 작품은 훌륭합니다. – wrede66

다음 #team 사업부가

나 '단지 텍스트 정렬 센터 당신의 "수치"에서 작동해야 inline-block 표시 바이올린을 업데이트했습니다. 여기에 : http://jsfiddle.net/a23z05te/2/

출처

2014-12-16 23:46:44 csilk

답변에 세부 사항을 추가 할 수 있습니까? 짧은 답변은 올바른 방향을 가리킴으로써 도움이 될 수 있지만 더 자세한 설명이 도움이 될 것입니다. – bjb568

플렉스 박스 대체품

답변

관련 문제