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，而不是将其浮动：

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

如何使图像，iframe，图标站在文本旁边不间断

1 个答案: