html - 如何让图片、iframe、图标不间断地站在文本旁边

Question

我花了三个小时试图重现上面的图像，但是我无法使文本保留在侧面并以 facebook-pile 和图标居中。谁能帮帮我？

代码:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<section class="social-media">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="fb-pile">
                                <h2> no Facebook:</h2>
                                <div class="fb-facepile" data-href="https://www.facebook.com/facebookdevelopers" data-max-rows="1" data-colorscheme="light" data-size="small" data-show-count="true"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="social-icons">
                                <h2>Compartilhar:</h2>
                                <a target="_blank" href="" title="Ir para página do facebook">
                                    <span class="fa fa-facebook fa-2x"></span>
                                </a>
                                <a target="_blank" href="" title="Ir para página do twitter">
                                    <span class="fa fa-twitter fa-2x"></span>
                                </a>
                                <a target="_blank" href="" title="Ir para página do instagram">
                                    <span class="fa fa-instagram fa-2x"></span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="trip-advisor">
                                <img class="trip-advisor-img" title="Recomende o Pub Crawl no Trip Advisor" src="http://upload.wikimedia.org/wikipedia/fr/1/1d/TripAdvisor-logo.png"/>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

Answer 1

尝试更改 .social-media h2 样式以包含 display: inline-block 而不是 float 它:

http://codepen.io/a_double/pen/EayaOa