並排，靈活的寬度divs沒有包裝？

我不確定如何最好地解釋這一點。我試圖將三個div元素並排放置;第一個（從左到右）是可變寬度，第二個也是可變寬度，第三個是靜態寬度，它向右漂移。前兩個是在第三個同一級別的div內;即在最大寬度下保持前兩個的總寬度。 Here is a jsfiddle我在做什麼。並排，靈活的寬度divs沒有包裝？

我的問題是，當中間div中的文本很長時，中間div將降到第一個以下，而不是文本換行。我不能給中間一個最大寬度，因爲第一個div是靈活的，可以變小。任何想法如何我可以去解決這個問題？

我知道這可以通過使用表來實現，但我真的不希望這樣做，除非它是唯一簡單的解決方案。

編輯：我決定只是固定的寬度。爲此需要的工作量並不值得，尤其是考慮到大多數時候，靈活的寬度永遠不會用於我。

來源

2012-08-09 404 Not Found

如果你想要一個純CSS的解決方案，那麼它可能會有點困難，也沒有太多的瀏覽器兼容。儘管可以通過使用名爲display:table ;和display:table-cell;的css屬性來實現此目的。再次老的瀏覽器，也許IE-9也贏了，不能這樣做。

然後，你應該去的jQuery解決方案。您可以使用以下代碼 -

$(document).ready(function(){ 
    var w = 400 - $('.inner_container .left_box').width();  
    $('.inner_container .middle')css('width',w); 
});

謝謝。

來源

2012-08-09 23:27:04 maksbd19

display: table屬性和相關屬性（如display: table-cell）在IE 8以後版本以及Firefox和Chrome/Safari的所有版本中都受到支持。

參考：http://caniuse.com/#feat=css-table

我相信這是你的情況的路要走。

HTML

<div class="container"> 
    <div class="inner_container"> 
     <div class="left_box"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     <div class="middle"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
    </div> 
    <div class="right_static">Hi!</div> 
</div>

CSS

.container { 
    position: relative; 
    width: 500px; 
    border: 1px solid #000; 
    overflow: auto; 
} 

.right_static { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 100px; 
    background-color: green; 
}  

.inner_container { 
    display: table; 
    width: 400px; 
    overflow: auto; 
} 

.left_box { 
    display: table-cell; 
    background-color: red; 
} 

.middle { 
    display: table-cell; 
    background-color: #9999FF; 
}

DEMO

http://jsfiddle.net/nd7qj/

順便說一句，你在你的問題中提到，最左邊的div應該具有靈活的寬度，但是在你提供的CSS中它具有固定的寬度。所以我沒有在我的代碼中使用寬度。

來源

2012-08-09 23:47:43 depa

並排，靈活的寬度divs沒有包裝？

回答

相關問題