我想使用margin-top:auto;在列底部制作社交媒体图标。
我试图降低障碍,但是没有成功,我在源代码中包含了一个jsfiddle。我只是想使用margin-top:auto;
将社交图标(黑盒)与底部对齐.team .thumbnails {
margin: 0;
padding: 0;
display: flex;
width: 100%;
}
.team .thumbnails .social-inline {
padding: 0;
background: #000;
margin-top: auto;
}
Jfiddle示例:
答案 0 :(得分:1)
您需要使flexbox弯曲,以便dd_1
.social
成为flex子代。
ul
http://jsfiddle.net/hj5f2nr9/33/
flexbox绑定将保留您要查找的flex行为,直到.profile, .thumbnail,.caption {display:flex;flex:1;flex-direction:column;}
的父容器为止。
注意:您可以简化HTML结构以避免太多的麻烦;)