我在将列表项的内容放在底部、基线时遇到问题。
看看这个:
<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 链接:
描述
当我只单击一个标题时,段落隐藏并且标题位于底部。 ( 好的 )
但是当我点击另一个标题时,它们都再次跳转到顶部。
关于这方面的任何帮助。
谢谢。
已编辑并已解决:
好吧,我希望有人能帮我用 css 方式解决这个问题。
但是我使用 jQuery 做了一个技巧。这是工作。但我不知道这是不是一个好方法。
代码如下:
Updated Code
最佳答案
vertical-align 的问题在于它将元素与其 inline
相邻的兄弟元素对齐。当它们都被最小化时,因为它们的高度相同,它们看起来彼此内嵌。
我建议使用固定高度 ul
的 position: absolute;
和 bottom: 0;
尽管这需要一些调整到您当前的样式。
编辑:
如何将 ul 放在容器 div 中,并将 ul 绝对定位到它的底部。
唯一的区别是 ul 周围有一个 div,我更改了以下样式:
.container {
position: relative;
width: 1150px;
min-height: 282px;
overflow: hidden;
border: 1px solid #000;
padding: 0;
margin: 0;
}
ul{
overflow: hidden;
position: absolute;
bottom:0;
padding: 0;
margin: 0;
}
关于javascript - 将列表项的内容放在 css 的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19156615/