如何自动调整中间 div 宽度？答案

【问题标题】：How to adjust middle div width automatically?如何自动调整中间 div 宽度？
【发布时间】：2023-04-03 18:17:01
【问题描述】：

当有 3 个项目/div/元素时，如何使中间 div 自动调整为 100% 宽度？

喜欢

<div style="width:500px; height:50px;">
<div style="float:left; width:50px; height:50px; background-color:red;">
a
</div>

<div style="float:right; width:50px; height:50px; background-color:red;">
b
</div>
<div style="width:auto; height:60px; background-color:blue;">
middle
</div>
    <div style="clear:both;"></div>
</div>

我不应该对中间 div 使用固定宽度，因为父 div 宽度 500px 将是响应宽度，在更改浏览器大小时进行调整。

我也试过了

<div style="text-align:center;"> THIS WILL BE DYNAMIC WIDTH
<div style="display:inline-block; width:100px;">
First Div
<div style="display:inline-block; width:WHAT SHOULD I WRITE HERE?;">
Middle Div
</div>
<div style="display:inline-block; width:100px;">
Right Div
</div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

你只需要改变：

<div style="width:auto; height:60px; background-color:blue;">

到

<div style="margin: 0 50px; height:60px; background-color:blue;">

它会按你的预期工作。

小提琴：http://jsfiddle.net/o0twxh5j/

希望对你有帮助

【讨论】：

【解决方案2】：

您可以使用CSS TABLES

html,
body {
  margin: 0;
}
.wrapper {
  display: table;
  width: 100%;
}
.left,
.middle,
.right {
  display: table-cell;
}
.left {
  width: 100px; /*whatever you need here */
  min-width: 100px; /*whatever you need here */
  background: #ff0;
}
.right {
  width: 200px; /*whatever you need here */
  min-width: 200px; /*whatever you need here */
  background: #f00;
}
.middle {
  background-color:#ccc
  }

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="middle">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

【讨论】：

【解决方案3】：

使用宽度：100%，它将占据所有可用空间。

【讨论】：

将占据浏览器宽度的 100%，不随浮动项调整。