плавающие два div рядом - PullRequest
Новая
       25

плавающие два div рядом

3 голосов
/ 04 августа 2011

Я пытаюсь плавать два деления рядом, независимо от размера экрана. В настоящий момент в IE 7, если я изменяю размер окон, один div падает ниже другого. Я думаю, потому что div2 содержит таблицу, и как только край окна попадает в таблицу, он падает ниже div1.

То, что у меня сейчас есть, работает в IE9 и Firefox, но должно работать в IE6 + 7. Я попробовал это решение CSS float - как мне сохранить их на одной строке? но, похоже, это не помогло. Опять же, я думаю, что это может быть связано с содержанием внутри этих элементов. Как это повторить?

Код: 

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

Ответы [ 3 ]

0 голосов
/ 04 августа 2011

дать ширину как "%"

Как 

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


#div2 {
     width:48%;
     border:1px dashed purple;
     float:left;
    }
0 голосов
/ 11 июля 2017 

#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 голосов
/ 04 августа 2011

Удалить поле слева: 505px; на div2

...