股利bettwen兩個div使用盡可能多的需要

我有3個格作其次股利bettwen兩個div使用盡可能多的需要

<div> 
    <div id='left' style='background:red;float:left;height:150px;width:150px;'> 
    </div> 
    <div id='right' style='background:green;float:right;height:150px;'> 
     <p>Hallo</p> 
    </div> 
    <div id='center' style='background:blue;height:150px;'> 
     <p>Hallo</p> 
    </div> 
</div>

中心DIV應該只填補空間在需要的時候。
而且儘可能多，然後它應該顯示一個水平滾動條
最後一個div不應該包裝到下一行！
就像我在上面的例子中所看到的那樣，即使在不需要的時候它也會填滿所有的時間。
但我需要的是，正確的div儘可能接近中心divs。

<div> 
    <div id='left' style='background:red;float:left;height:150px;width:150px;'> 
    </div> 
    <div id='center' style='background:blue;float:left;white-space: nowrap;overflow-x:auto;overflow-y:hidden;'> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
    </div> 
    <div id='right' style='background:green;height:150px;'> 
     <p>Hallo</p> 
    </div> 
</div>

該例表明我想要什麼，但在這種情況下，如果我加入中心的某些字符的div它包裝的權利div來新線像圖所示：

<div> 
    <div id='left' style='background:red;float:left;height:150px;width:150px;'> 
    </div> 
    <div id='center' style='background:blue;float:left;white-space: nowrap;overflow-x:auto;overflow-y:hidden;'> 
     <p>Hallo aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
    </div> 
    <div id='right' style='background:green;height:150px;'> 
     <p>Hallo</p> 
    </div> 
</div>

任何想法如何解決？

來源

2012-11-21 ok3n0b1

要你想要什麼清晰的，你不想要什麼不傻的例子幫幫我。畫一幅圖或用文字解釋。 – Andy

您的問題需要使用JS來計算div的寬度（因爲如果未設置寬度，溢出將不起作用），然後設置正確的百分比寬度以使其爲流體。

注意，當您調整您的瀏覽器（懶得做）這個答案將無法正常工作....

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var wrapperWidth = $('#wrapper').width(); // get width of main wrapper 
    var wrapperRight = $('#right').width(); // get width of right 
    var wrapperRight = (wrapperRight/wrapperWidth)*100; //get percentage width of right 
    var wrapperLeft = (150/wrapperWidth)*100; //get percentage width of left 
    var wrapperCenter = 100 - (wrapperLeft + wrapperRight); // get percentage width of center 
    $('#left').css('width',wrapperLeft+'%'); // add inline css for width 
    $('#center').css('width',wrapperCenter+'%'); // add inline css for width 
    $('#right').css('width',wrapperRight+'%'); // add inline css for width 
}); 
</script> 
<div id='wrapper' style='width: 100%;'> 
    <div id='left' style='background:red;float:left;height:150px;width:150px;'> 
    </div> 
    <div id='center' style='background:blue;float:left; overflow-x: scroll; overflow-y: hidden;'> 
     <p>Hallo aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
     <p>Hallo</p> 
    </div> 
    <div id='right' style='background:green;height:150px; float: left;'> 
     <p>Hallo</p> 
    </div> 
</div>

來源

2012-11-21 17:33:39 Japol

股利bettwen兩個div使用盡可能多的需要

回答

相關問題