如何通过CSS调整特定框的大小

Question

我想调整到右侧框，而左框值（400px）将修复我如何通过CSS做到这一点？当我调整浏览器窗口右侧框时，下来是不对的。这是css和html。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

您可以使用固定宽度的#left框（在我的情况下为宽度：400px;）和#right框，根据屏幕宽度使用 CSS Flexbox 进行响应。

正如下面的代码段所示：

#left{
  width: 400px;
  display: inline-block;
  border:solid 1px #000;
  height:100px;
  box-sizing: border-box;
}
#right{
  display: inline-flex;
  width: calc(100% - 405px);
  border:solid 1px #000;
  height:100px;
  box-sizing: border-box;
}

<div id="left"></div>
<div id="right"></div>

Answer 3

如果flexbox是一个选项，您可以w设置一个弹性箱，并且：

1. 将flex: 1提交给right进行自我调整

2. 将flex: 0 0 400px添加到left以保持宽度固定为400px。

演示如下：

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

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

Answer 4

#w{
        max-width:1000px;
        white-space: nowrap; 
        border:solid 1px #eee;
        box-sizing: border-box;
        width: 100%;
        margin:0;     
}
#left{
      display:inline-block;
      max-width:400px;
      width:100%;
      border:solid 1px #000;
      height:100px;
      box-sizing: border-box;
}
#right{
      display:inline-block; 
      max-width:598px;
      width:100%;
      border:solid 1px #000;
      height:100px;
      box-sizing: border-box;
}

    <div id="w">
    <div id="left">X</div>
    <div id="right">X</div>
     Tested: Firfox & Chrome browsers!
    </div>

Answer 5

希望它会对你有所帮助。

   #w {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
        border: solid 1px #eee;
        box-sizing: border-box;
        position: relative;
        padding-left: 400px;
    }

    #left {
        width: 400px;
        border: solid 1px #000;
        height: 100px;
        float: left;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
    }

    #right {
        width: 100%;
        border: solid 1px #000;
        height: 100px;
        float: left;
        box-sizing: border-box;
    }

    .clear {
        clear: both
    }