計算中間格的寬度

我正在使用float：left將div放在同一行中。我的問題是，div1將有一個隨機寬度。 Div 3將始終爲25像素，左右邊距爲1，然後中間div需要填充剩餘空間。

什麼是最好的方式來實現這一點，仍然在所有的瀏覽器支持？

這是我試過的，但問題是％寬度不會工作，因爲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; 
}

來源

2015-04-04 Bojan

張貼的標記似乎並沒有完成... – 2015-04-04 15:55:14

添加overflow: auto會使div填滿餘下的空間。

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

來源

2015-04-04 16:02:33

這工作，謝謝。 – Bojan 2015-04-04 16:03:49

我按照你的例子，但我的綠色酒吧總是去新的路線。這裏是一個例子：http://tiu.azularis.com/Services你有什麼可以告訴我爲什麼？ – Bojan 2015-04-04 16:18:35

是的，我應該提到，因爲'overflow：auto'填充剩餘的空間，你需要把它放在html右邊的div之後。所以首先留下div，然後右div和中div。 – 2015-04-04 16:27:04

計算中間格的寬度

回答

相關問題