Question

我有两个div框，我用它作为扩展崩溃和一些javascript，但问题是它们目前在彼此之下对齐。我想让它们彼此相邻，但我遇到了一堵墙。

我的风格如下：

<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对齐，以便展开 - 折叠功能正常工作。

由于 Mestika

Answer 1

他们没有对齐，因为您在ID为<br>的链接之前有mostrar2

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

Answer 2

我删除了与您的问题无关的所有代码，并留下了这个，其行为符合预期：

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

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

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

将div框彼此对齐

2 个答案: