CSS - 當左列寬度為％，最大寬度為px時，填充右列剩余寬度

Question

我有2列。 第一個是30％寬度，第二個是70％寬度。 但是，當屏幕足夠寬時，col-0寬度限制為300px。 如何使col-1寬度擴展以適應頁面寬度的其余部分？

 #col-0{ width: 30%; max-width: 300px; min-height: 2em; float: left; display: inline-block; background-color:red; } #col-1{ width: 70%; min-height: 2em; display: inline-block; background-color:green; } 

 <div id="col-0"></div> <div id="col-1"></div> 

Answer 1

使用Flexbox 。 像這樣的東西：

.column-container {
  display: flex;
}

#col-0 {
  flex: 0 1 30%;
  max-width: 300px;
  min-height: 2em;
  background: red;
}

#col-1 {
  flex: 1 1 70%;
  min-height: 2em;
  background: green;
}

<div class="column-container">
  <div id="col-0"></div>
  <div id="col-1"></div>
</div>

的jsfiddle

PS CSS技巧對flexbox有一個非常有用的指南 。

另外，對原始CSS的一個小注釋 - 當使用float ， display屬性將不起作用。

Answer 2

你可以為#col-1的CSS做這樣的事情

 #col-0{ width: 30%; max-width: 300px; min-height: 2em; float: left; display: inline-block; background-color:red; } #col-1{ min-width: 70%; min-height: 2em; display: inline-block; background-color:green; width:calc(100% - 300px); } 

 <div id="col-0"></div> <div id="col-1"></div>