1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class="post"> <h1>This is my first blog post</h1> <div class="post-meta"> <div class="author">Alex Cheng</div> <div class="datetime">2014-07-02 10:10 am</div> <div class="comments-count">2 comments</div> </div> <div class="post-body"> My first blog post. </div> <div class="post-image"> <img src="//placehold.it/500x200&text=1"> </div> <div class="post-comments"> <h3>Comments</h3> <ul> <li><div class="author">Bob</div><div>This is a good post.</div></li> <li><div class="autho">David</div><div>Good post.</div></li> </ul> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .post { display: flex; flex-flow: column wrap; } .post-meta { display: flex; flex-flow: row wrap; order: 1; } .post-body { order: 3; } .post-comments { order: 4; } .comments-count { margin-left: auto; } .post-image { order: 2; align-self: center; } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |