html - 如何通过 css 调整特定框的大小

Question

我想调整到右边的框，而左边的框值 (400px) 将被修复我如何通过 css 做到这一点？当我调整浏览器窗口的大小时，右边的框掉下来是不对的。这是 css 和 html。

#w {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  border: solid 1px #eee;
  box-sizing: border-box;
}
#left {
  max-width: 400px;
  width: 100%;
  border: solid 1px #000;
  height: 100px;
  float: left;
  box-sizing: border-box;
}
#right {
  max-width: 598px;
  width: 100%;
  border: solid 1px #000;
  height: 100px;
  float: left;
  box-sizing: border-box;
}
.clear {
  clear: both
}

<div id="w">
  <div id="left"></div>
  <div id="right"></div>
  <div class="clear"></div>
</div>

Answer 1

尝试

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

.div3 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div4 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

<h2>Without box-sizing</h2>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

<h2>With box-sizing</h2>
<div class="div3">Both divs are the same size now!</div>
<br>
<div class="div4">Hooray!</div>