Question

我有2个DIV，我希望在所有情况下并排。到目前为止，我正在完成这样的事情：

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

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

然而，我不喜欢我必须在第二个div中指定绝对宽度。

我只希望第一个div是显示表格的最小宽度，第二个div是占用剩余空间而不会溢出。

有更好的方法吗？

Answer 1

我发现非常通用的一种方法是只浮动一个的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上的填充设置为padding-left：200px; padding -right：200px（如果你想要一个间隙，则为210）。

Answer 2

当你说“剩下的空间”是什么意思。如果你的表突然变成了3000px，会发生什么？

我认为解决方案可能是将它们包装在第三个div中：

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

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

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

Answer 3

如果你不介意忽略ie6＆amp; 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>

可能有一些ie hack会使这个浏览器工作，检查： http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

在CSS中制作并排DIV的更好方法

3 个答案: