如何进行最佳垂直对齐

How to do a best fit vertical align

本文关键字：对齐 垂直 最佳 何进行      更新时间：2023-09-26

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

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

这里有一个小提琴来说明我的意思：

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/

但是请记住，

各部分中的内容都是动态的，因此"section3"的样式定义需要具有动态负上边距才能正常工作。

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

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

如果您希望它们垂直居中，请将width:200px更改为width:100%;

http://jsfiddle.net/PTQS8/3/

<div class="jqDialog">
   <section>
       <br/><br/>
   </section>
   <section class="section2">
       <br/><br/><br/><br/><br/><br/><br/><br/><br/>
   </section>
   <section class="section3">
       <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;
}
.section2 { float: right; }
相关文章：