html - 一行三个div

Question

我想将三个 div 对齐在一行中，因为我已将左侧和中心 div 设置为 float:left 属性，将右侧 div 设置为 float right 属性

但是我右边的div显示在屏幕的左边

我的代码如下

<div style="width:100%; height:100%;">
<div align="center" id="left_portion" style="display:none; position:absolute; float:left; width:10%; height:10%;"></div>
<div id="scroller" align="center" style="width:100%; height:100%; overflow:hidden; position:absolute; float:left;">
    <img src="" id="img_main" style="width:100%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
</div>
<div id="right_portion" align="center" style="display:none; float:right; position:absolute;  width:10%; height:10%;"></div>
</div>   

我想使用左右 div 作为 mask div，即当我点击中心 div 时，第二个 div 将缩放，我想显示 div 的特定部分，其余部分将从左侧和右格

Answer 1

如果你想让它们连续显示，为什么不使用display: inline-block呢？这是一个例子:http://jsfiddle.net/5y2WK/