Question

在一个左右填充2％的容器中，我有两个div盒。左侧div框的固定宽度为200px，固定边距为60px。我希望正确的div调整其宽度，浏览器窗口越小/越大。如何实现红色框的宽度始终（独立于浏览器宽度）填充，直到容器的rigth填充开始，而蓝色div保持200px？

JSFIDDLE：http://jsfiddle.net/3vhrst19/3/

HTML：

<div id="container">
    <div id="fixed-width"></div>

    <div id="flexible-width"></div>
</div>

CSS：

#container {
    float: left;
    width: 100%;
    padding: 50px;
    background: lightgrey;
}

#fixed-width {
    float: left;
    width: 200px;
    height: 500px;
    margin-right: 60px;
    background: blue;
}

#flexible-width {
    float: left;
    width: 500px; /* my goal is that the width always fills up independent of browser width */
    height: 500px;
    background: red;
}

Answer 1

使用flexbox：

可以轻松实现这一目标

#container {
  display: flex;
  width: 100%;
  padding: 50px;
  background: lightgrey;
  box-sizing: border-box; /* used so the padding will be inline and not extend the 100% width */
}

响应元素使用flex-grow填充剩余空间：

#flexible-width {
  flex: 1; /* my goal is that the width always fills up independent of browser width */
  height: 500px;
  background: red;
}

请注意，我删除了所有floats，因为在此示例中没有必要。

JSFiddle

Answer 2

使用calc从100％宽度

中删除固定宽度和边距宽度

#container {
  float: left;
  width: 100%;
  padding: 50px;
  background: lightgrey;
}
#fixed-width {
  float: left;
  width: 200px;
  height: 500px;
  margin-right: 60px;
  background: blue;
}
#flexible-width {
  float: left;
  max-width: 500px;
  /* my goal is that the width always fills up independent of browser width */
  width: calc(100% - 260px); /* Use calc to remove the fixed width and margin width from the 100% width */
  height: 500px;
  background: red;
}

<div id="container">
  <div id="fixed-width"></div>

  <div id="flexible-width"></div>
</div>

Div与固定的div和div的宽度相互柔和

2 个答案: