0

だから私はこの問題を抱えています。フライアウトを中央に配置したいのですが、ここにキャッチがあります。ユーザーがアップロードした画像なので、サイズがわかりません。また、画面を小さくしても画像が消えてしまうことはありません。位置を相対位置に設定しようとしましたが、画像/テキストがフライアウトの後ろに押し下げられます。

<div id="imageFlyout<?=$step['order']+1?>" class="popUpWrapper" style="display:none;position:absolute;top:100px;left:<script type="text/JavaScript">
            int w = screen.width;
            <?php $tempSize=getimagesize("guidebook_images/".$step['attachment']); if($tempSize[0] > 935){?>w/2<?php }else{?>w-<?php echo($tempSize[0]/2);}?></script>px;">
4

2 に答える 2

0

デモ: http://jsfiddle.net/uriahjamesgd_73/kNFGj/22/

CSS 値 VW (ビューアの幅) と VH (ビューアの高さ) を使用して、フライアウトが特定のインスタンスのビューポートのパーセンテージになるように指定しました。これにより、モバイル デバイスでのビューポートのサイズ変更が可能になることを願っています。

<!-- HTML -->
<div class="wrap">
  <div class="product">
    <span class="flyOut"></span>
  </div>
</div>​

/* CSS */
body { margin: 50px; }
.wrap { position: relative; }
.product { background-color: #555; position: relative; width: 100px; height: 75px; }
span.flyOut { display: none; background-color: #ddd; position: absolute; width: 50vw; height: 37.5vh; left: 100%; }
.product:hover > span.flyOut { display: inline-block; }

</p>

于 2012-11-19T16:03:40.477 に答える
0

HTML でのセンタリングは、簡単な 2 ステップのプロセスです。

親に与える:

text-align:center;

要素を与える：

margin:auto;
于 2012-05-01T14:53:41.427 に答える