三个div在一行 [英] three div in a single row

问题描述

我想在一行中对齐三个div，因为我已经给出了left和center div为float：left属性和right div为float right属性。

I want to align the three div in a single row for that i have given the left and center div to float:left property and right div to float right property

但我的右侧div显示在屏幕的左侧

but my right div is displayed on the left side of the screen

我的代码如下

<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作为掩蔽div，当我点击中心div第二div将要缩放，我想显示div的特定部分，其余部分将从左右掩码div

i want to use the left and right div as a masking div i.e. when i click on center div second div is going to scale and i want to show the particular portion of the div and rest portion is going to mask from left and right div

推荐答案

如果您希望它们连续显示，为什么不使用 display：inline-block ？以下是一个示例： http://jsfiddle.net/5y2WK/

If you want them displayed in a row, why not use display: inline-block? Here's an example: http://jsfiddle.net/5y2WK/

这篇关于三个div在一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！