Flexbox只能在镀铬

我试图实现一个固定的两列div，另一个被拉伸填充休息。为此，我目前使用了Flexbox，但是我发现它在Safari和IE 10中不起作用。那么，如何在没有Flexbox的情况下实现相同的结果？Flexbox只能在镀铬

.stat-result { 
 
    border: 1px solid #ddd; 
 
    width: 100%; 
 
    display: flex; 
 
    margin-bottom: 20px !important; 
 
} 
 

 
.stat-result .stat-meta { 
 
    float: left; 
 
    width: 100%; 
 
    min-height: 40px; 
 
    border-right: 1px solid #ddd; 
 
} 
 

 
.stat-result .result-meta { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.stat-result .result-meta i { 
 
font-size: 50px; 
 
line-height: 80px; 
 
} 
 

 
.stat-result .stat-meta .stat-row { 
 
    width: 100%; 
 
    height: 50%; 
 
    border-bottom: 1px solid #ddd; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 

 
.stat-result .stat-meta .stat-row span { 
 
    line-height: 40px; 
 
    font-weight: 700; 
 
    font-family: Oswald; 
 
    text-transform: uppercase; 
 
    
 
} 
 
.stat-result .stat-meta .stat-row1 { 
 
    width: 100%; 
 
    height: 50%; 
 
     padding-left: 10px; 
 
    padding-right: 10px; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 

 
.stat-result .stat-meta .stat-row1 span { 
 
    line-height: 40px; 
 
}

<div class="stat-result"> 
 
<div class="stat-meta"> 
 
<div class="stat-row"> 
 
<span><a href=" http://www.ggwp.dk/titan-vs-mousesports/ ">Titan Vs. Mousesports</a></span> 
 
    </div> 
 
    <div class="stat-row1"> 
 
     <span>1.35</span> 
 
     <span style="float: right;">Test</span> 
 
    </div> 
 
</div> 
 
<div class="result-meta"> 
 
    <i class="fa fa-check-circle"></i> 
 
    </div> 
 
</div>

来源

2015-02-11 Peter Pik

您似乎没有任何Flexbox的性质那里。您是否对Flexbox盒子大小感到困惑？ – Quentin 2015-02-11 11:59:55

他使用display：flex on .stat-result – donnywals 2015-02-11 12:02:28

而是缺乏所有Flexbox的前缀。根据caniuse你实际上可以使用flexbox for safari和IE10。

更新小提琴http://jsfiddle.net/LLExL/4088/

和CSS

.stat-result { 
    border: 1px solid #ddd; 
    width: 100%; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    margin-bottom: 20px !important; 
}

编辑：我想用一饮而尽/咕噜和autoprefixer自动前缀你的CSS建议。

来源

2015-02-11 12:01:51 donnywals

如果您不想使用flexbox，则可以使用table-cell属性来实现相同。

.stat-result { 
border: 1px solid #ddd; 
width: 100%; 
display: table; 
margin-bottom: 20px !important; 
} 

.stat-result .stat-meta { 
display:table-cell; 
width:calc(100% - 100px); 
min-height: 40px; 
border-right: 1px solid #ddd; 
} 

.stat-result .result-meta { 
display: table-cell; 
width: 100px; 
height: 100%; 
text-align: center; 
}

FIDDLE DEMO

来源

2015-02-11 12:03:55

Flexbox只能在镀铬

回答

相关问题