Css 并排浮动两个div_Css_Internet Explorer 7_Css Float_Internet Explorer 6

Css 并排浮动两个div

css

Css 并排浮动两个div,css,internet-explorer-7,css-float,internet-explorer-6,Css,Internet Explorer 7,Css Float,Internet Explorer 6,我试着让两个div并排浮动，不管屏幕大小如何。在IE7中，如果我调整窗口的大小，一个div会下降到另一个div的下方。我认为这是因为div2包含一个表，当窗口的边缘碰到表时，它就会下降到div1下面我目前拥有的功能在IE9和Firefox中都可以使用，但需要在IE6+7中使用。我试过这个办法，但似乎没有用。我再次认为这可能是由于这些div中的内容。如何复制它代码： JS-Bin #包装器{ 最小宽度：510px；宽度：自动！重要；宽度：510px；边框：1px纯红；} #第一组{

我试着让两个div并排浮动，不管屏幕大小如何。在IE7中，如果我调整窗口的大小，一个div会下降到另一个div的下方。我认为这是因为div2包含一个表，当窗口的边缘碰到表时，它就会下降到div1下面

我目前拥有的功能在IE9和Firefox中都可以使用，但需要在IE6+7中使用。我试过这个办法，但似乎没有用。我再次认为这可能是由于这些div中的内容。如何复制它

代码：


JS-Bin
#包装器{
最小宽度：510px；
宽度：自动！重要；
宽度：510px；
边框：1px纯红；}
#第一组{
浮动：左；
颜色：蓝色；
宽度：500px；
边框：1px紫色虚线；
高度：400px；}
#第二组{
左边距：505px；
边框：1px紫色虚线；}
#div2表{边框：1px点绿色；}
有时我包含一个表，有时我包含一个对象。其中一个显示图表
我通常是一名报告员
asdfasdfads
谢谢，今天很热，但是比去年这个时候稍微凉快一点。

这里可以找到一个活生生的例子

去掉左边的空白：505px；在div2上，将宽度设为“%”

像

#包装器{
显示器：flex；
证明内容：之间的空间；
边框：2个点红色；
填充：20px；
}
#包装部{
宽度：48%；
边框：2件紫色斑点；
}


JS-Bin
有时我包含一个表，有时我包含一个对象。烦恼
它显示一个图表
我通常是一名报告员
asdfasdfads
DSAFASDFASDFASDFASDFADSFASDFASDADFFADSFADFSFADFSDFASDFDFFGREAT谢谢，
今天很热，但不知怎么的比上次凉爽了一点
一年。

你的div2根本不浮动-让它

float:left

并将div的位置设置为relative。我更新了它，但它仍在下降。我现在在jsbin上尝试了很多，但我就是没能让它工作。。。真是个奇怪的问题！我希望有人能解决它：）我也是。昨天我花了大部分时间在Freenodes#css IRC上，我有一些建议和改进，所以它在IE中根本不起作用，但通过在div2上添加一个边距，它在IE9中也能起作用。div1的宽度为500px，所以如果窗口大小降到它下面，div2就会降到它下面。在我的ie7中这样工作，无法在ie6中测试

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

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


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