1
我对某些布局使用了flexbox。Flexbox IE align-self
我有这样的HTML:
<article>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus posuere felis in pellentesque. Donec malesuada dolor in sapien egestas dictum. Ut volutpat nulla magna.</p>
<span class="push-right academic"> </span>
</article>
和相关的CSS:
#work-items article {
background: #dddddd;
width: 32%;
padding: 10px;
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: start;
-ms-flex-line-pack: stretch;
-ms-flex-direction: column;
-ms-flex-wrap: nowrap;
display: flex;
align-items: center;
justify-content: flex-start;
flex-flow: column nowrap;
}
#work-items article .push-right {
align-self: flex-end;
padding: 5px;
-ms-flex-item-align: end;
}
#work-items article .push-right.academic {
background: url("../img/academic-black.png");
width: 32px;
height: 23px;
}
我能得到我想要在Chrome的外观,但IE10似乎并没有放置图标右下角(点击查看图片):