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 回答