防止背景布局拉伸

Question

我试图让容器大小拉伸到其物品的大小。但浏览器始终将容器背景宽度拉伸至100％。有没有办法阻止布局拉伸？

Link to JSFiddle

＆＃13;

＆＃13;

.content {
  margin-left: 50px;
  background-color: grey;
}
.item {
  margin: 20px;
  display: inline-block;
  background-color: #BFC5C7;
  width: 250px;
  height: 400px;
}

＆＃13;

<div class="content">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法控制背景'宽度'。您在这里唯一能做的就是在width div上设置max-width或content，例如

.content{
  max-width:290px;
  margin-left: 50px;
  background-color: grey;
}

另一种选择，如果您不想在此元素上设置宽度，则可以为其提供背景图像，其中包含您希望背景的最大宽度/高度，并将其设置为no-repeat，例如

.content{
  margin-left: 50px;
  background:url(mySizedImage.png) no-repeat top left;
}