并排浮动两个div

问题描述：

我想并排浮动两个div，无论屏幕大小如何。目前在IE 7中，如果我调整窗口的大小，一个div会降到另一个之下。我认为它是因为div2包含一个表格，并且一旦窗口边缘碰到表格，它就会落在div1下面。并排浮动两个div

我目前在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

您DIV2不浮在所有 - 让'浮动：左;'和将div的位置设置为相对。 – Quasdunk

我更新了它，但仍然下降。 http://jsbin.com/awijew/12 –

我一直在jsbin上尝试了很多，但我只是没有得到它的工作......真的很奇怪的问题！我希望有人能解决它:) – Quasdunk

答

取出保证金左：505px;在DIV2

不起作用仍然是相同的结果。 http://jsbin.com/awijew/13 –

div1的宽度为500px，所以如果窗口大小低于它，div2将下降。在ie7中像这样工作，无法在ie6中测试 – anderssonola

答

给予宽度为 “％”

像

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


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

答

#wrapper{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border: 2px dotted red; 
 
    padding: 20px; 
 
} 
 
#wrapper div{ 
 
    width: 48%; 
 
    border: 2px dotted purple; 
 

 
}

<!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>

相关推荐