Question

我有2列。第一个是30％宽度，第二个是70％宽度。但是，当屏幕足够宽时，col-0宽度限制为300px。如何使col-1宽度扩展以适应页面宽度的其余部分？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

P.S CSS Tricks对弹性箱有一个非常有帮助的guide。

此外，对原始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>

CSS - 当左列宽度为％，最大宽度为px时，填充右列剩余宽度

2 个答案: