如何填充剩餘空間

Question

我有一個包含4個項目的水平列表。第一項將始終爲52px寬。我希望剩下的三個項目的寬度相等並填充剩餘的空間。

我該怎麼做？

.wa_talents .unlocks { 
 
    width: 50px !important; 
 
    background: black; 
 
    font: normal 20px/52px"Palatino Linotype", "Georgia", "Times", serif; 
 
    text-align: center; 
 
} 
 
.wa_talents .tier { 
 
    list-style-type: none; 
 
    border: 1px solid #221d19; 
 
    box-shadow: 0 0 4px #000; 
 
    height: 52px; 
 
    margin: 5px; 
 
    clear: left; 
 
} 
 
.wa_talents .tier li { 
 
    float: left; 
 
    margin-left: 5px; 
 
    width: 30%; 
 
    /* THIS FAILS HARD*/ 
 
    height: 52px; 
 
} 
 
.talent { 
 
    background: #000; 
 
} 
 
.talent .cell { 
 
    padding: 4px; 
 
    margin-top: 2px; 
 
    opacity: 0.25; 
 
} 
 
.talent .name { 
 
    width: 125px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
    line-height: 150%; 
 
    color: #ffb100; 
 
} 
 
.talent.active .name { 
 
    color: #fff; 
 
} 
 
.frame-36 { 
 
    height: 36px; 
 
    width: 36px; 
 
} 
 
.talent .icon-frame { 
 
    display: inline-block; 
 
    padding: 1px; 
 
    background: #000 no-repeat 1px 1px; 
 
    border-radius: 3px; 
 
    border: 1px solid #434445; 
 
    border-bottom-color: #2f3032; 
 
    border-top-color: #b1b2b4; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
} 
 
.talent.active .cell { 
 
    opacity: 1; 
 
} 
 
.talent.active { 
 
    background: #5b2200; 
 
    border-color: #ce5209; 
 
    box-shadow: 0 0 8px #ce5209 inset; 
 
}

<div class="wa_talents"> 
 
    <div class="tiers"> 
 
    <ul class="tier"> 
 
     <li class="unlocks">15</li> 
 
     <li class="talent active"> 
 
     <a href="http://www.google.com" target="_blank"> 
 
      <div class="cell"> 
 
      <span class="icon-frame frame-36"></span> 
 
      <span class="name">Foo</span> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="talent"> 
 
     <a href="http://www.google.com" target="_blank"> 
 
      <div class="cell"> 
 
      <span class="icon-frame frame-36"></span> 
 
      <span class="name">Bar</span> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="talent"> 
 
     <a href="http://www.google.com" target="_blank"> 
 
      <div class="cell"> 
 
      <span class="icon-frame frame-36"></span> 
 
      <span class="name">Baz</span> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 

 
    <!-- HERE WILL BE SOME MORE ul#tier LISTS --> 
 
    </div> 
 
</div>

View On CodePen

Answer 1

在純CSS做到這一點的唯一方法是使用計算值（）。您可以在此處查看文檔和兼容性表格：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

最簡單的解決方案是使用calc函數。在你的情況將是：

.wa_talents .tier li { 
    float: left; 
    width: calc((100% - 52px - 20px)/3); 
    height: 52px; 
    margin-left: 5px; 
} 

規則是有點棘手：52是第一li的寬度，那麼你還需要減去項目（20px）之間的總利潤率。

Support：所有主流瀏覽器和IE9 +。

演示：http://codepen.io/anon/pen/raXqZG

Answer 3

如前所述，calc不是廣泛支持。錯筆

Answer 4

純CSS：http://codepen.io/saig/pen/EaqBZd

使用JavaScript：http://codepen.io/saig/pen/raXqEJ

var mainId = document.getElementById('main'); 
var calcWidth = mainId.clientWidth - 52; 
var list = document.getElementsByTagName("li"); 
for(i=0; i < list.length; i++){ 
    if(list[i].classList.contains("talent")){ 
    list[i].style.width=Math.floor((calcWidth/mainId.clientWidth*100)/(list.length-1))-1+"%"; 

    } 
}