Question

当有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>

Answer 1

你只需要改变：

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

要

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

它会按预期工作。

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

希望这有帮助

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

Answer 3

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

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

3 个答案: