Question

如何在div的右侧设置背景图像并从右侧设置填充而不从左侧定义固定距离？例如，我想在div的右侧设置一个图像，并且从右边始终有20px填充。

div的宽度并不总是相同，这就是我无法定义确切位置的原因。我只是希望它在右侧有精确的20px填充，无论div的宽度是多少。

我正在尝试使用代码，但它不起作用。

HTML：

<div>Title</div>

CSS：

div{
  background: url(gowalla.png) no-repeat right center;
  width: 400px;
  border: 1px solid red;
  padding: 20px;  
}

演示： http://jsfiddle.net/mQGcF/

Answer 1

使用background-position: 96% 50% ;

执行此操作

第一个值表示x-axis，第二个值表示y-axis。

SEE THIS LINK的解释。

 div{
  background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) no-repeat 96% 50% ;
  width: 400px;
  border: 1px solid red;
  padding: 20px;  
}

<强> DEMO

更新了答案

尝试添加外部div并为内部div指定边距

<强> HTML

<div class="wrap"><div>Title</div></div>

<强> CSS

 .wrap{
        border:solid 1px green; 
      display:inline-block;  
      width:auto; 
    }
    .wrap div{ 
      width: 400px;  
      background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) right no-repeat;  
      margin-right: 20px; 
      padding:20px
    }

<强> DEMO 2

Answer 2

据我所知，你不能用CSS做到这一点。您只有两种选择：

在图像中包含间距。这可能是不可能的，但如果是最简单的话，那就是最简单的。
使用包含DIV个标签的两个标签。一个保持边界，外部间距，第二个保持背景。
```
<div class="outer"><div class="inner">Title</div>
```

和CSS

.outer{
    width: 400px;
    border: 1px solid red;
    padding: 0px 20px;  
}
.inner{
    background: url('gowalla.png') no-repeat right center;
    padding: 20px 0px;  
}

http://jsfiddle.net/mQGcF/4/

Answer 3

你可以使用

padding-right:20px;

或

 padding:0px 20px 0px 0px;

demo here

从右边填充背景图像

3 个答案: