我試圖實現一個固定的兩列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