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

Question

当有 3 个 item/div/elements 时，如何让中间的 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;">

它会如您所愿地工作。

fiddle :http://jsfiddle.net/o0twxh5j/

希望对你有帮助