2

我正在尝试将图像嵌套在另一个图像之上（使用 twitter bootstrap）问题是当我重新调整浏览器大小时，箭头图像的位置不一致（见图）

它应该是：

在此处输入图像描述

但是当浏览器重新调整大小时：

在此处输入图像描述

代码是：

<div class="container">
<div class="row">
    <div class="col-lg-4">
        <div>
            <img alt="" src="../images/fulltime.png" class="img-responsive" />
            <img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />
            <label style="position: absolute; top: 12px; left: 43px; font-size: 19px; font-family: Trebuchet MS;
                color: White;">
                Professional
            </label>
            <p style="position: absolute; top: 80px; left: 25px; font-size: 13px;">
                random text
                <br />
                random text
                <br />
                random text
            </p>
        </div>
    </div>
  </div>
</div>

我在这里做错了什么？还是不可能？

注意：我只是用引导程序更改了我最近的网络，所以我对这些东西很陌生，如果有帮助，我会使用引导程序 v3。

谢谢你。

4

2 回答 2

4

找到解决方案，只需在标签img-responsive内添加类<div class="col-lg-4">

进行中<div class="col-lg-4 img-responsive">

无论浏览器屏幕如何重新调整大小，图像现在都保持“完整”，干杯！

于 2013-07-31T04:44:46.287 回答
1

At the moment you are using top: 170px; left: 341px or saying go 341px in from the left and 170px down from the top. If you position it using bottom and right instead of top and left, then it will anchor to the bottom right corner and you will be saying "So many px from the bottom and so many from the right"

So instead of:

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />

Have something like:

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; bottom: 50px; right: 19px" />

Change the numbers to suit but note the top is now bottom and left is now right

于 2013-07-30T09:40:14.977 回答