如何使用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>

- zuby

---

请查看此Fiddle。 - Mohammad Usman

首先，在 #right 中更改您的 CSS……您不能同时拥有宽度和最大宽度……选择一种并使用百分比而不是像素。其次，使用 @media 查询指定您想要右侧框改变大小的时间，然后相应地进行样式设置。 - weinde

哇！Muhammad Usman，它正在工作，非常感谢。 - zuby

@weinde 为什么我们不能给一个元素同时设置宽度和最大宽度？这是可以实现的。 - Shahil M

这可能回答了你的问题：http://www.w3schools.com/css/css_max-width.asp - weinde

感谢澄清。此外，请在此处找到有关将max-width和width应用于元素的一些信息：https://css-tricks.com/almanac/properties/m/max-width/ - Shahil M

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>

- Razia sultana

Answer 2

你可以使用固定宽度的#left盒子（在我的情况下为width: 400px;），并使用CSS Flexbox使#right盒子根据屏幕宽度响应。

就像下面的代码片段所示：

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

- Saurav Rastogi

---

Saurav这个程序是跨浏览器的吗？ - zuby

@zuby 是的！但请注意，在早期版本的IE中可能会出现错误，因为IE尚未完全支持CSS Flexbox。 - Saurav Rastogi

感谢您的回复，但是IE 9不支持该代码。 - zuby

Answer 3

如果flexbox是一个选项，您可以将w设置为flexbox并执行以下操作：

1. 将flex: 1赋予right以进行自适应调整

2. 添加flex: 0 0 400px到left以保持宽度固定在400像素。

以下是演示：

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

- kukkuz

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>

- user7139867

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
    }

- Praveen Murali