logo标签列表

将两个div浮动并排放置

cssinternet-explorer-7css-floatinternet-explorer-6
3
我试图让两个div并排显示，无论屏幕大小如何。目前在IE7中，如果我调整窗口大小，一个div会掉到另一个下面。我认为这是因为div2包含了一个表格，一旦窗口的边缘碰到表格，它就会掉到div1下面。
我目前的解决方案在IE9和Firefox中有效，但需要在IE6+7中使用。我尝试了这个解决方案 CSS浮动-如何保持它们在同一行？ ，但似乎没有帮助。再次说明，这可能是由于这些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根本没有浮动 - 让它float:left;并将div的位置设置为relative。 - Quasdunk
我已经更新了，但它仍在掉线。http://jsbin.com/awijew/12 - Alistair Laing
我已经在jsbin上尝试了很多次，但是它就是无法工作...真的是一个非常奇怪的问题！希望有人能够解决它 :) - Quasdunk
我也是。昨天大部分时间我都在 Freenodes 的 #css IRC 上，我有一些建议和改进，因为在 IE 中根本无法工作，但通过给 div2 添加一个边距，我设法让它在 IE9 中正常工作了。 - Alistair Laing
3个回答
0

将宽度设置为“％”

例如

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


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

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

0

移除 div2 上的 margin-left: 505px;

div1的宽度为500像素，因此如果窗口大小小于它，div2将会下移。在我的ie7中可以正常工作，但无法在ie6中测试。 - anderssonola
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接