Question

我有一个问题，就是将列表项的内容放到底部，基线。

看看这个：

    <ul>
    <li class="box">
        <div class="close" ></div>
        <div class="head"> Header </div>
        <p class="area">
            This is Paragraph
        </p>
    </li>
    <li class="box">
        <div class="close" ></div>
        <div class="head"> Header </div>
        <p class="area">
            This is Paragraph
        </p>
    </li>
</ul>

和JQUERY部分：

    $( document ).on( "click", "ul li .head", function() {

    $(this).parent('li').toggleClass( 'minimize' );
    $(this).parent('li').children('p').toggle();

});

最终是CSS

ul { position: static; bottom: -4px; width: 1150px;  min-height: 250px; overflow:     hidden; 
}
ul li {
position: relative;
border: 1px solid lightgray;
width: 260px;
background-color: #f2f2f2;
display: inline-block;
margin: 0 2px;
}
ul li .head {
font-weight: bold;
padding: 5px;
background-color: #6D84B4;
color: white;
border: 1px solid #6D84B4;
text-align: right;
}
p.area { padding: 8px; height: 200px; }
.minimize { vertical-align: bottom;}

以下是jsFiddle链接：

link to jsFiddle

描述
当我只点击一个标题时，Paragraph隐藏并且标题位于底部。（好）但是当我点击另一个标题时，它们都会再次跳到顶部。

对此有任何帮助。
感谢。

已编辑＆amp;解决：
好吧，我希望有人可以帮助我用css方式解决这个问题但我使用jQuery做了一个技巧。这是工作。但我不知道这是一个好方法。

这是代码：
Updated Code

Answer 1

vertical-align的问题在于它将元素与其inline个相邻的兄弟姐妹对齐。当它们都被最小化时，因为它们是相同的高度，它们彼此串联。

我建议使用固定高度position: absolute;的{{1}}和bottom: 0;，但这需要对您当前的样式进行一些调整。

编辑：

如何将ul放在容器div中，并将ul绝对定位到底部。

Demo

唯一的区别是ul周围的div，我更改了以下样式：

ul

Answer 2

添加

white-space: nowrap;

到ul

ul { position: static; bottom: -4px; width: 1150px;  min-height: 250px; overflow:     hidden; 
white-space: nowrap;}

希望它有效。 :)我尝试通过删除更新代码中的新jQuery部分并添加此代码来尝试此代码。

将列表项的内容放在css的底部？

2 个答案: