Media Object 图文并排

http://codepen.io/airen/pen/gaxpxj
Flag Object的概念，采用display:table-cell

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .flag { display: table; width: 100%; } .flag__item { display: table-cell; } .flag-top .flag__item { vertical-align: top; } .flag-middle .flag__item { vertical-align: middle; } .flag-bottom .flag__item { vertical-align: bottom; } .flag__item > img { display: block; } .flag__item--heading { margin: 0; } .flag__item--heading + p { margin-top: 20px; } .flag__item + .flag__item { padding-left: 20px; } .card { border: 1px solid #ccc; padding: 20px; max-width: 70%; margin: 20px auto; } .card p:last-of-type { margin-bottom: 0; } </style> </head> <body> <div class="flag card flag-top"> <div class="flag__item"> <img src="https://unsplash.it/70/70/?random" alt="" /> </div> <div class="flag__item"> <h3 class="flag__item--heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquam laboriosam voluptatibus minima quidem laudantium, quae necessitatibus assumenda debitis similique expedita inventore amet explicabo, voluptate, ipsam ea voluptas, quia. Neque nisi quis rem voluptas asperiores excepturi fugiat facilis ea, earum ipsa dolorem obcaecati odit voluptates. Hic odio amet neque blanditiis.</p> </div> </div> <div class="flag card flag-middle"> <div class="flag__item"> <img src="https://unsplash.it/70/70/?random" alt="" /> </div> <div class="flag__item"> <h3 class="flag__item--heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquam laboriosam voluptatibus minima quidem laudantium, quae necessitatibus assumenda debitis similique expedita inventore amet explicabo, voluptate, ipsam ea voluptas, quia. Neque nisi quis rem voluptas asperiores excepturi fugiat facilis ea, earum ipsa dolorem obcaecati odit voluptates. Hic odio amet neque blanditiis.</p> </div> </div> <div class="flag card flag-bottom"> <div class="flag__item"> <img src="https://unsplash.it/70/70/?random" alt="" /> </div> <div class="flag__item"> <h3 class="flag__item--heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquam laboriosam voluptatibus minima quidem laudantium, quae necessitatibus assumenda debitis similique expedita inventore amet explicabo, voluptate, ipsam ea voluptas, quia. Neque nisi quis rem voluptas asperiores excepturi fugiat facilis ea, earum ipsa dolorem obcaecati odit voluptates. Hic odio amet neque blanditiis.</p> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> </html>

提示：你可以先修改部分代码再运行。

Flexbox

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .media { display: flex; align-items: flex-start; } .media-figure { margin-right: 1em; } .media-body { flex: 1; } </style> </head> <body> <div class="media"> <img class="media-figure" src="http://www.gzui.net/wp-content/themes/yusi1.0/timthumb.php?src=http://www.gzui.net/wp-content/uploads/2015/05/6c224f4a20a44623ed3bc56b9a22720e0df3d7c2.jpg&h=123&w=200&q=90&zc=1&ct=1" alt="" /> <div class="media-body">Flexbox来实现Media Object的效果...</div> </div> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Media Object 图文并排