对齐彼此相邻的div盒

我有两个div盒，我用它作为一些javascript的展开 - 折叠，但问题在于它们当前彼此对齐。我想让他们相邻，但我碰到了一堵墙。对齐彼此相邻的div盒

我的风格是这样的：

<style type="text/css"> 
body { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
color: #666666; 
} 
a{color:#993300; text-decoration:none;} 
#caja, #caja2 { 
width:30%; 
display: none; 
padding:5px; 
border:2px solid #FADDA9; 
background-color:#FDF4E1; 
} 

#mostrar, #mostrar2{ 
display:block; 
width:30%; 
padding:5px; 
border:2px solid #D0E8F4; 
background-color:#ECF8FD; 

} 
</style>

而我的HTML看喜欢这样的：

<a href="#" id="mostrar">MOSTRAR</a> 

<div style="display: none;" id="caja"> 
<a href="#" class="close">[x]</a> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
rebum. Stet clita kasd gubergren</p> 
</div> 
<br> 
<a href="#" id="mostrar2">MOSTRAR 2</a> 

<div style="display: none;" id="caja2"> 
<a href="#" class="close">[x]</a> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
rebum. Stet clita kasd gubergren</p> 
</div>

我试着float:left;但他们并不完全彼此相邻，但与对齐方框2（MOSTRAR 2）仅仅是方框1（MOSTRAR 1）下方的几个像素。

因为我需要caja和caja2以使expand-collapse功能正常工作。

感谢 Mestika

来源

2010-03-08 Mestika

他们不对齐，因为你在那里有一个<br>在链接之前使用id = mostrar2

添加float: left。删除<br>。它按预期工作。

来源

2010-03-08 17:04:52 ghoppe

我删除了所有的代码无关你的问题，并留下了这一点，其行为与预期相同：

<style type="text/css"> 
    #one, #two { 
     float: left; 
    } 
</style> 

<div id="one">CAJA</div> 

<div id="two">CAJA2</div>

来源

2010-03-08 17:01:56 Dolph

对齐彼此相邻的div盒

回答

相关问题