javascript - 如何做最合适的垂直对齐

Question

我看到很多“如何垂直对齐东西”类型的问题，但我似乎找不到任何解决这个特定问题的方法。

我在 jquery 对话框中有 3 个“部分”，我希望它们垂直放置在空间中，而不会在它们之间留下大的间隙。我不知道他们的高度，因为他们的内容是动态的和变化的。

这是一个显示我的意思的 fiddle :

http://jsfiddle.net/PTQS8/

在最简单的形式中，代码看起来像这样(想象一下所有的 br 标签都是真实的内容)

<div class="jqDialog">
   <section>
       <br/><br/>
   </section>
   <section>
       <br/><br/><br/><br/><br/><br/><br/><br/><br/>
   </section>
   <section>
       <br/><br/><br/><br/><br/>
   </section>
</div>

然后是我当前的 CSS:

section { 
    border: solid 1px #DADADA; 
    margin: 5px; 
    padding: 5px;
    width: 200px; 
    display: inline-block;
    vertical-align: top;
}

如果可能，我希望底部自动填充其上方的空间。

有什么想法吗？

编辑:

可能是我说的不够清楚...

这是我的理想结果: http://jsfiddle.net/PTQS8/2/

但是请记住，sections 中的内容都是动态的，因此“section3”的样式定义需要具有动态的负上边距才能使其正常工作。

我想用 javascript 可以解决这个问题，但我希望有一个更优雅的解决方案。

Answer 1

<!--The simplest way is to use the span and float properties.-->
<!--Make use of table if you dont like the gap between the left and right panes-->
    <div class="jqDialog">
       <span style="float: left"><section>
           <br/><br/>
           </section></span>
       <span style="float: right"><section>
           <br/><br/><br/><br/><br/><br/><br/><br/><br/>
           </section></span><span  style="float: left">
       <section>
           <br/><br/><br/><br/><br/>
        </section></span>
    </div>