0

左と中央のdivをfloat:leftプロパティに、右のdivをfloat rightプロパティに指定したため、3つのdivを1行に揃えたい

しかし、私の右の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 をマスキング div として使用したい 中央の div をクリックすると 2 番目の div が拡大縮小され、div の特定の部分を表示したいので、残りの部分は左右の div からマスクされます

4

4 に答える 4

1

それらを一列に表示したい場合は、使用してみませんdisplay: inline-blockか？次に例を示します：http：//jsfiddle.net/5y2WK/

于 2012-07-11T15:57:30.763 に答える
0

最初に絶対配置を削除し、フローティング手法を使用し、2 番目の div の幅を 100% ではなく 80% に設定して、1 番目と 3 番目の div をロードするためのスペースを確保します。

<div style="width:100%; height:100%;">
  <div align="center" id="left_portion" style="display:none;  float:left; width:10%; height:10%;">asdasdad</div>
  <div id="scroller" align="center" style="width:80%; height:100%; overflow:hidden; float:left;">   sdfsd
    <img src="" id="img_main" style="width:80%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
  </div>
  <div id="right_portion" align="center" style="display:none; float:right;   width:10%; height:10%;">sdfsdd </div>
</div>
于 2012-07-11T11:04:44.990 に答える