我试图实现一个固定的两列div,另一个被拉伸填充休息。为此,我目前使用了Flexbox,但是我发现它在Safari和IE 10中不起作用。那么,如何在没有Flexbox的情况下实现相同的结果?Flexbox只能在镀铬
http://jsfiddle.net/LLExL/4086/
.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>
您似乎没有任何Flexbox的性质那里。您是否对Flexbox盒子大小感到困惑? – Quentin 2015-02-11 11:59:55
他使用display:flex on .stat-result – donnywals 2015-02-11 12:02:28