如何让div宽度自动填满中间区域

Question

<div style="width:100%">
    <div style="float:left; height:100px; width:100px; border:1px solid blue"></div>
    <div style="float:left; border:1px solid red">dddddddddddd</div>
    <div style="float:right; width:100px; height:100px;border:1px solid green"></div>
</div>

Answer 1

减去两边的长度

width: calc(100% - 200px);

Answer 2

<div style="width:100%;display:-webkit-flex;display:flex;">

<div style="height:100px; width:100px; border:1px solid blue"></div>
<div style="border:1px solid red;flex: 1;">dddddddddddd</div>
<div style="width:100px; height:100px;border:1px solid green"></div>

</div>
这个可以，不过不兼容IE8、9,也可以用js

Answer 3

搜 双飞翼布局

Answer 4

这个真是基础题啊

<div>
    <div style="float:left; height:100px; width:100px;"></div>
    <div style="float:right; width:100px; height:100px;"></div>
    <div style="margin:0 100px 0 100px;">dddddddddddd</div>
</div>