Question

我在三个div标签中包含三个框，这些标签引用ID，如下所示（粗略）。我希望第三个盒子只填充剩下的空间。我的问题是它是一个重复的背景。有什么建议吗？

.nav{
  list-style-type: none;
  overflow:hidden;
  display: inline;

}
.li{
  text-align: center;

}
.flex-container {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}

.flex-item {
  margin: 5px;
}
.resize-anchor{
  display: inline-block;
  height: auto;
  width: 300px;
}
.hplogo-a{
  display: inline-block;
  height: auto;
  width: 200px;
}
a{
  display:inline-block;
  color:black;
  text-decoration: none;
  white-space: nowrap;
}
a:hover{
  color:#D1946F;
  text-decoration: none;
}

a:link{
  color:#D1946F;
  text-decoration: none;
}
.nav-link{
  margin:0px 10px 30px 10px;
  font-family: Calibri;
  font-size: 18px;
  font-style: normal;
  font-variant: normal;
  line-height: 26.4px;
  padding: 0px 10px 0px 10px;
  margin-top: 20px;
}

我还想说明我已尝试过#box3{ background-image: url("box3.png"); background-size: 80px 80px; bottom: 35px; float: left; height: 160px; margin: 50px 0 0 1120px; position: absolute; width: 800px; }，overflow: hidden;，width: auto;，width: 100%;以及其他一些我忘记的事。

我对所有回答的人表示感谢和赞赏！

Answer 1

试试这个：

#box3 {
      background-image: url("box3.jpg");
      background-size: 80px 80px;
      background-repeat: no-repeat;
      bottom: 35px;
      float: left;
      height: 160px;
      margin: 50px 0 0 1120px;
      position: absolute;
      width: 800px; 
    }

使用重复BG Div（CSS）填充剩余空间

1 个答案: