Question

我需要将红色圆圈图像移动到如下图所示的位置： enter image description here

我的代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>領収書</title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    {% if receipt %}
    <div class="container-fluid">

        <div class="row">
            <div class="col-xs-6">
                        <h2>領収書
                        </h2>
                    </div>
              <div class="col-xs-6">
                        <div class="row">
                            <div class="col-xs-3 col-xs-offset-3">
                                <h5>No.　{{receipt['receipt_number']}}</h5>
                        <h5>{{receipt['date']}}</h5>
                        <hr/>
                            </div>

                        </div>

                    </div>

            <div class="row">
                    <div class="col-xs-4 text-center">
                        <h3>{{receipt['c_name']}}　様</h3>
                        <hr/>
                    </div>

                </div>

             <div class="row">

                    <div class="col-xs-6 col-xs-offset-3 text-center">
                        <h3><b>￥ {{receipt['amount']}}</b><br/>
                        </h3>
                            <hr/>

                    <h3>
                        但 {{receipt['quantity']}} {{receipt['product']}}<br/>
                    </h3>
                        <h4>
                        上記正に領収いたしました
                    </h4>
                    </div>


                </div>





        </div>
        <div class="row">

                    <div class="col-xs-6 text-center col-xs-offset-6">
                        <h5>xxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
                        <h5>xxxxxxxxxxxxxxxxxxxxxxx</h5>
                        <img src='inkan.PNG'/>
                    </div>
                </div>


    </div>
     {% endif %}
    <!-- /container -->
</body>
</html>

有人能告诉我怎么做吗？

Answer 1

只需将这些样式添加到您的img并使用＆＃34;右键＆＃34;值;

<img src='inkan.PNG' style="position: absolute; right: 200px;"/>

Answer 2

只需将图片添加为背景，如下所示：

<div class="col-xs-6 text-center col-xs-offset-6" style="background:url(urlhere) no-repeat">

有关详细信息，请参阅this link。

Answer 3

为div添加id，然后将其添加到广告css属性background: url({url});，如下所示：

<强> HTML：

<div id="myDiv"></div>

<强> CSS：

#myDiv {
    background: url({url});
}

从单独的文件或<style/>标记中包含CSS代码。

我还建议您尝试使用CodeCademy上的web course来了解您需要了解的有关HTML＆amp; CSS。

Answer 4

如果你使用背景，它将不会被某些浏览器打印。

解决此问题的最佳方法是在图像元素上使用相对（或绝对）定位。但是你必须在Bootstrap上安装一些小东西。基本上他们没有任何位置属性，所以你不能真正使用子元素上的位置属性。

首先，让我们解决定位继承问题：

.row > div { position:relative; }

将此CSS规则作为示例以使其具有相对性，您也可以使用position: absolute和/或float:right，但我认为这应该没问题，具体取决于您的内容。我已将您的图片使用100px作为示例大小，根据需要进行更改。

.inkan_image { position:relative; top:0px; right:0px; width:100px; height:100px }

在您的HTML中，您只需将您的课程添加到图片即可。顺便说一下：我会将Image定位为您内容中的第一个元素，因为它将浮动或将定位在右侧，然后内容才会交换。

<img src='inkan.jpg' class='inkan_image'>

如何将图像设置为div的背景

4 个答案: