Question

无论屏幕的大小是多少，我都试图将两个div并排浮动。在IE 7中，如果我调整窗口的大小，那么一个div会低于另一个。我认为它是因为div2包含一个表格，一旦窗口边缘击中表格，它就会下降到div1之下。

我目前在IE9和Firefox中有效，但它需要在IE6 + 7中运行。我尝试了这个解决方案CSS floats - how do I keep them on one line?，但似乎没有帮助。我认为这可能是由于这些div中的内容。如何复制它？

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  #wrapper { 
    min-width:510px; 
    width: auto !important; 
    width: 510px; 
    border: 1px solid red; }

  #div1 {
    float:left;
    color:blue;
    width:500px;
    border: 1px dashed purple; 
    height: 400px;}

  #div2 {
    margin-left:505px;
    border:1px dashed purple;}

  #div2 table{border: 1px dotted green;}

</style>
</head>
<body>
  <div id="wrapper">
    <div id="div1" >
      Sometimes I contain a table and sometimes I contain an object. Bother of which displays a chart
    </div>    
    <div id="div2">    
       <table>
        <tr>
         <td> I am normally a report
           asdfasdfads
           dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks, today has been quiet hot but somehow a bit cooler than this time last year. 
         </td>
       <td></td>
       </tr>
      </table>
    </div>
  </div>
</body>
</html>

可在此处找到实时示例http://jsbin.com/awijew/11

Answer 1

删除边距：505px;在div2上

Answer 2

将宽度设为“％”

像

#div1 {
    float:left;
    color:blue;
    width:48%;
    border: 1px dashed purple; 
    height: 400px;
}


#div2 {
     width:48%;
     border:1px dashed purple;
     float:left;
    }

Answer 3

＆＃13;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JS Bin</title>
    </head>
    <body>
    <div id="wrapper">
    <div id="div1" >
      Sometimes I contain a table and sometimes I contain an object. Bother of 
      which displays a chart
    </div>    
    <div id="div2">    
       <table>
         <tr>
          <td> I am normally a report
           asdfasdfads
           dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks, 
           today has been quiet hot but somehow a bit cooler than this time last 
           year. 
          </td>
          <td></td>
         </tr>
       </table>
    </div>
    </div>
    </body>
    </html>

＆＃13;

{{1}}

＆＃13;

漂浮两个div并排

3 个答案: