0

如何在 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/

4

3 回答 3

2

用它做background-position: 96% 50% ;

第一个值表示x-axis和第二个值y-axis

请参阅此链接以获取说明。

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

演示


更新的答案

尝试添加外部 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
    }

演示 2

于 2013-01-08T07:17:08.183 回答
1

据我所知,你不能用 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/

于 2013-01-08T07:25:11.210 回答
0

你可以使用

padding-right:20px;

或者

 padding:0px 20px 0px 0px;

演示在这里

于 2013-01-08T07:29:11.983 回答