在CSS中製作並排DIV的更好方法

我有2個DIV，我想在所有情況下都是並列的。到目前爲止，我完成這樣的：在CSS中製作並排DIV的更好方法

<div style="float: left"> 
    <table> ... </table> 
</div> 

<div style="float: right; overflow: scroll; width: 1000px"> 
    <pre> ... </pre> 
</div>

然而，我不喜歡，我在第二div指定一個絕對寬度。

我只想第一個div是顯示錶格的最小寬度，第二個div佔用剩餘空間而沒有溢出。

有沒有更好的方法？

來源

2010-06-11 JoelFan

如果你不介意忽視IE6 & 7，這將很好地工作：

<div style="white-space:nowrap;"> 
    <div style="display:inline-block;"> 
    blah 
    </div> 

    <div style="display:inline-block;"> 
    blah 
    </div> 

    <div style="clear:both;"></div> 
</div>

可能有一些黑客，即，這將使該瀏覽器這項工作，請檢查： http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

來源

2010-06-11 05:31:03

當你說「剩餘空間」時，你的意思是什麼。如果你的桌子突然變成3000px，會發生什麼？

我認爲一個解決辦法可能是將它們包裝在第三格：

<div style="width: 1500px;"> 
    <div style="float: left"> 
    <table> ... </table> 
    </div> 

    <div style="float: right;"> 
    <pre> ... </pre> 
    </div> 

    <div style="clear:both;"></div> 
</div>

來源

2010-06-11 04:08:11

一種方法我已經找到了相當多用的是隻漂浮的div的一個。浮動左邊的一個，並把，很多填充在右邊的div。下面是我的意思的例子：http://jsfiddle.net/a6Bv8/ - 我把一個與邊框或留白需求的內包裝材料，使其流體，以及三列例子..

#left { width:50%; float:left; } 
#right { padding-left:50%; } 

<div id="container"> 
    <div id="left"> 
     left left left 
    </div> 
    <div id="right"> 
     right right right 
    </div> 
</div>

這是很好的，也是這樣，做三列。你可以浮動第一個div到左邊，並給它它的寬度（比如說200px），向右浮動右邊的列並設置它的寬度（比如說200px），並且在第三個div上設置填充，填充左邊：200px; padding正確的：200px（如果你想要一個空白，則爲210）。

來源

2010-06-11 04:33:31

在CSS中製作並排DIV的更好方法

回答

相關問題