1

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

我在 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 可以解决这个问题，但我希望可能有一个更优雅的解决方案。

4

3 回答 3

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>
于 2013-09-23T09:25:41.250 回答
0

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

于 2013-09-23T09:26:28.300 回答
0

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; }
于 2013-09-23T10:04:47.383 回答