Question

所以我有这个问题。我想把我的弹出中心放在一边，但这里是抓住了。我不知道图片的大小是什么，因为它是用户上传的图片。如果我让屏幕更小，我也不会消失图片。我试图将位置设置为相对，但然后它将我的图像/文本推到了弹出窗口后面。

<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;">

Answer 1

以HTML格式居中是一个简单的两步过程：

给父母：

text-align:center;

提供元素：

margin:auto;

Answer 2

演示：http://jsfiddle.net/uriahjamesgd_73/kNFGj/22/

我使用了CSS值VW（观看者宽度）＆amp; 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; }

如何定位图片弹出窗口

2 个答案: