如何使用CSS将背景图像放置在容器div旁边指定的距离

时间：2016-07-24 12:59:22

标签： html css twitter-bootstrap

我正在尝试将图像定位到页面中心的大容器div的左侧和右侧，如附图所示。我是CSS和整体前端技术的新手，所以这对我来说是一项具有挑战性的任务。

下面是我想要实现的目标的图像：

ForStyling

HTML开发人员工具中的HTML如下所示（不同的订单内容提供图像，但布局相同）：

<div class="page-header">
  <div class="container-fluid">
    <img src="/Content/clients/Test/logo.png" alt="Test" title="Test">
  </div>
</div>

<div id="sidebars">
  <div class="container">

    <div class="page-header">
      <img src="/Content/clients/Test/logo.png" alt="Test" title="Test">
    </div>
    <div class="panel panel-default">
      <div class="panel-body">

        <div class="form-horizontal">
          <div class="form-group nobottom">
            <div class="col-sm-5">
              <label class="col-sm-5 control-label">Connote:</label>
              <div class="col-sm-7">
                <p class="form-control-static"></p>
              </div>
            </div>
            <div class="col-sm-7">
              <label for="connote" class="col-sm-3 control-label">Status:</label>
              <div class="col-sm-9">
                <span>Hooray, your order has been delivered.</span>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">History</div>
      <div class="panel-body">
        <div class="list-group nobottom">
          <div class="list-group-item ">
            <div style="width: 26px; display: inline-block;">
              <span class=" icon-default"></span>
              <span class="label label-default">
                                        <span class="glyphicon glyphicon-arrow-up">&nbsp;</span>
              </span>
            </div>
            <div style="width: 80%; display: inline-block;">
              <h4 class="list-group-item-heading">Hooray, your order has been delivered.</h4>
              <p class="list-group-item-text">06-May-2016 11:58 AM</p>
              <p class="list-group-item-text" style="white-space: pre-line">CLAYTON SOUTH PDC</p>
            </div>
          </div>
          <div class="list-group-item ">
            <div style="width: 26px; display: inline-block;">
              <span class=" icon-default"></span>
              <span class="label label-default">
                                        <span class="glyphicon glyphicon-arrow-up">&nbsp;</span>
              </span>
            </div>
            <div style="width: 80%; display: inline-block;">
              <h4 class="list-group-item-heading">The driver has your order, they are on the way</h4>
              <p class="list-group-item-text">06-May-2016 05:42 AM</p>
              <p class="list-group-item-text" style="white-space: pre-line">CLAYTON SOUTH PDC</p>
            </div>
          </div>
          <div class="list-group-item ">
            <div style="width: 26px; display: inline-block;">
              <span class=" icon-default"></span>
              <span class="label label-default">
                                        <span class="glyphicon glyphicon-arrow-up">&nbsp;</span>
              </span>
            </div>
            <div style="width: 80%; display: inline-block;">
              <h4 class="list-group-item-heading">Get excited your order is not too far away</h4>
              <p class="list-group-item-text">05-May-2016 09:52 PM</p>
              <p class="list-group-item-text" style="white-space: pre-line">MELBOURNE PARCEL FACILITY</p>
            </div>
          </div>
          <div class="list-group-item ">
            <div style="width: 26px; display: inline-block;">
              <span class=" icon-default"></span>
              <span class="label label-default">
                                        <span class="glyphicon glyphicon-arrow-up">&nbsp;</span>
              </span>
            </div>
            <div style="width: 80%; display: inline-block;">
              <h4 class="list-group-item-heading">The couriers have your order, they'll get it to you shortly</h4>
              <p class="list-group-item-text">05-May-2016 10:25 AM</p>
              <p class="list-group-item-text" style="white-space: pre-line">MELBOURNE PARCEL FACILITY DWS</p>
            </div>
          </div>
          <div class="list-group-item ">
            <div style="width: 26px; display: inline-block;">
              <span class=" icon-default"></span>
              <span class="label label-default">
                                        <span class="glyphicon glyphicon-arrow-up">&nbsp;</span>
              </span>
            </div>
            <div style="width: 80%; display: inline-block;">
              <h4 class="list-group-item-heading">Hooray, Your order is on its way</h4>
              <p class="list-group-item-text">04-May-2016 12:00 AM</p>
              <p class="list-group-item-text" style="white-space: pre-line"></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-body">
        <form action="/" method="get">
          <div class="form-horizontal">
            <div class="form-group nobottom">
              <div class="col-sm-6">
                <label for="connote" class="col-sm-4 control-label">Connote:</label>
                <div class="col-sm-8">
                  <input id="connote" name="connote" class="col-sm-4 form-control" value="" type="text">
                </div>
              </div>
              <div class="col-sm-6">
                <label for="connote" class="col-sm-4 control-label"></label>
                <div class="col-sm-8">
                  <button type="submit" class="btn btn-primary form-control">Search</button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>

<script src = "/Scripts/jquery-2.1.1.js"></script>    
<script src = "/Scripts/jquery-ui-1.10.4.js"></script>    
<script src = "/Scripts/bootstrap.min.js"></script>

如何使用css或其他格式化技术将容器旁边顶部的图像显示在任何一侧和相同位置的距离？

非常感谢帮助

提前谢谢你，

标记

2 个答案:

答案 0 :(得分：0)

你可以这样做：

<div width="100%">

<div id="image-left">
set a background 
</div>

<div id="main-center"> </div>

<div id="image-right">
set a background 
</div>

</div>

答案 1 :(得分：0)

有几种方法可以做到这一点。我做的一个是将CSS属性float:left用于图像，然后将它们放入容器中。

我为你做了一个例子。运行下面的代码段。

.container{
  width:200px;
  height:auto;
  margin:auto;
  border:1px solid red;
  
}

.image{
  
  float:left;
  margin-left:-60%;
  width:30px;
  height:30px;
  
}
img{
  width:80px;
  height:auto;
  
}
.image2{
  
 float:left;
 margin-left:120%;
  width:30px;
  height:30px;
  
}
<div class="container">
<div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png"></div>
<div class="image2"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png"></div>
<div class="content">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

</div>

</div>

相关问题
最新问题