计算中间分隔的宽度

Question

我有3个div

我使用float:left将div放在同一行。我的问题是div1将有一个随机宽度。Div 3将始终是25个像素，左右边距为1。然后中间的div需要填满剩余的空间。

实现这一点并在所有浏览器中仍然受支持的最佳方式是什么？

这是我尝试过的，但问题是%width不起作用，因为div1的宽度总是会变化。

<div class="title-div gradient">
    <div class="title-div-left">
        <p>Service 1</p>
    </div>
    <div class="background-line"></div>
        <div class="title-div-right">
            <img src="ArrowUp.png" alt="▲">
        </div>
    </div>
</div>
.services-wrapper .expansion-wrap .title-div {
  height: 3.5rem;
  line-height: 3.5rem;
  width: 95.6rem;
  font-size: 1.7rem;
  color: #FFF;
  margin-left: 3.4rem;
  background: #6f1505;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmMTUwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDA4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #6f1505 0%, #340801 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f1505), color-stop(100%, #340801));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #6f1505 0%, #340801 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #6f1505 0%, #340801 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #6f1505 0%, #340801 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #6f1505 0%, #340801 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f1505', endColorstr='#340801',GradientType=0 );

.services-wrapper .expansion-wrap .title-div .title-div-left {
  float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-left p {
  margin: 0;
  padding-left: 1.7rem;
  padding-right: 1rem;
  font-size: 2rem;
  font-weight: bold;
  display: inline;
}
.services-wrapper .expansion-wrap .title-div .background-line {
  background-image: url("../images/Line.png");
  background-repeat: no-repeat;
  background-position: center;
  background-position: no-repeat;
  width: 50%;
  height: 100%;
  float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-right {
  float: left;
  height: 3.5rem !important;
  padding-left: 1rem;
}
.services-wrapper .expansion-wrap .title-div .title-div-right img {
  margin-top: 0.5rem;
}

Answer 1

添加overflow: auto将使div填充剩余空间。

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