Question

我的网站是cg-its.com

我似乎无法将facebook社交图标与其他图标完美搭配。

我已尝试使用CSS对齐所有内容，但出于某种原因，它希望坐在其他按钮之上！

这是HTML / PHP：

<div class="container">
  <div class="four columns">
    <?php if($data['text_callus'] != "") { ?>
    <div class="callus"><?php echo $data['text_callus']; ?></div>
    <div class="clear"></div>
    <?php } ?>
  </div>
  <div class="twelve columns">
    <div class="socialshare">
      <div class="facebookshare">
        <div class="fb-like" data-href="http://www.facebook.com/ConradGoodmanIT" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
      </div>
      <a href="https://twitter.com/ConradGoodmanIT" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @ConradGoodmanIT</a>
      <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
      </script>
      &nbsp; &nbsp;
      <!-- Place this tag where you want the +1 button to render. -->
      <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="http://www.cg-its.com"></div>
      <!-- Place this tag after the last +1 button tag. -->
      <script type="text/javascript">
        window.___gcfg = {lang: 'en-GB'};

        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/platform.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </div>
  </div>
</div>

和CSS

.container .twelve.columns .socialshare {
  float: right;
  margin-top: 10px;
 }

.container .twelve.columns .socialshare .facebookshare {
  margin-top: 0px;
  display: inline;
 }

Answer 1

我无法解释它（如果有人可以，请发帖，然后我会删除这个），但如果我将overflow:hidden; height:20px放在两个div上，问题就消失了（在Firefox 26上）。< / p>

对我来说看起来像个错误...我不知道溢出会如何导致上边距。

Answer 2

编辑以包含说明 通过将.socialshare div设置为inline-block，我们将两个容器保持为块级元素，同时允许它们彼此相邻。

.container .twelve.columns .socialshare .facebookshare {
  display: inline-block;
  margin-top: 10px;
}
.container .twelve.columns .socialshare .othershare {
  display: inline-block;
  margin-top: 10px;
}

多个<div>没有对齐并且坐在彼此的顶部</div>

2 个答案: