並排浮動兩個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

來源

2011-08-04 Alistair Laing

您DIV2不浮在所有 - 讓'浮動：左;'和將div的位置設置爲相對。 – Quasdunk

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

我一直在jsbin上嘗試了很多，但我只是沒有得到它的工作......真的很奇怪的問題！我希望有人能解決它:) – Quasdunk

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

來源

2011-08-04 08:27:09 anderssonola

不起作用仍然是相同的結果。 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; 
    }

來源

2011-08-04 08:44:39

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

來源

2017-07-11 10:32:10 ARPIT

並排浮動兩個div

回答

相關問題