Question

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

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

这是一个显示我的意思的小提琴：

以最简单的形式，代码看起来像这样（只是想象所有的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可以解决这个问题，但我希望可能有一个更优雅的解决方案。

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>

Answer 2

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

Answer 3

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; }

如何做最佳的垂直对齐

3 个答案: