对齐2 div并排

我有一个问题得到2 div并排对齐。根据我的理解，使用“float：left”应该可以做到，但它不会 - div会出现在彼此之上。我虽然可能是浏览器，但我尝试了FF，Opera和IE，结果是一样的。对齐2 div并排

这里是我的代码

<head> 
    <style> 
     div.container{ 
      position: relative; 
      width:800px; 
      height: 1000px; 
      background-color: red; 
      overflow: hidden; 
     } 

     div.banner{ 
      position: relative; 
      align:left; 
      width: 800px; 
      height: 100px; 
      float:left; 
      background-color: blue; 
      clear:both; 
     } 
     div.navBar{ 
      position: absolute; 
      width: 200px; 
      height: 300px; 
      float:left; 
      background-color: yellow; 
      clear: left; 
     } 

     div.content{ 
      position: absolute: 
      width: auto; 
      height: auto; 
      float:left; 
      background-color: orange; 
      clear: right; 
     } 
    </style> 
</head> 

<body> 
    <div name="banner" class="banner"> 
     This will be the banner 
    </div> 

    <div name="container" class="container"> 
     <div name="navBar" class="navBar"> 
      This will be the navbar 
     </div> 

     <div name="content" class="content"> 
      This will be the content 
     </div> 

    </div> 
</body>

所有div是不同的颜色，所以它更容易地看到究竟会去哪里。

来源

2012-02-19 user1219387

其中的div都出现在彼此的顶部？你想要哪一个并排？ – mergesort 2012-02-19 15:54:37

在此处可以正常工作http://jsfiddle.net/7HDtU/您是否将身体或浏览器窗口限制为小于1000像素的宽度？那会导致他们看起来堆叠而不是并排？ – JaredMcAteer 2012-02-19 15:55:04

'div.content {position：absolute：...'''有错误。它应该是';'而不是'：' – 2012-02-19 15:59:41

position:absolute是使它们重叠的原因。

删除绝对定位，它应该工作正常。

在这里看到的动作：http://jsfiddle.net/5ULsG/

来源

2012-02-19 15:58:13 Nirmal

这是一个完整的布局，包括注脚其中大部分可能是你所需要的。是的，绝对没有混乱。 :)

<div name="banner" class="banner"> 
This will be the banner 
</div> 

<div name="container" class="container"> 
<div name="navBar" class="navBar"> 
    This will be the navbar 
</div> 

<div name="content" class="content"> 
    This will be the content 
    </div> 
    <div name="footer" class="footer"> 
    Footer 
    </div>

 div.container{ 
     width:800px; 
     height: 1000px; 
     background-color: red; 
    } 

    div.banner{ 
     width: 800px; 
     height: 100px; 
     background-color: blue; 
    } 
    div.navBar{ 
     float:left; 
     width: 200px; 
     height: 300px; 
     background-color: yellow; 
    } 

    div.content{      
     float:left; 
     background-color: orange; 
    } 
    div.footer{      
     clear:both; 
     background-color: blueviolet; 
    }

http://jsfiddle.net/L4Zjh/1/

来源

2012-02-19 18:21:00

回答

相关问题