如何在Wordpress中定位DIV

Question

我正在尝试将3 x 340px宽盒子（用于存放社交媒体供稿）彼此相邻。我有完美的the first 2 lined up，但the 3rd is not lining up。

我在html使用自定义wordpress字段。代码如下：

<div style="width:100%;height:500px;float:center;">

<div style="width:340px;height:500px;float:left;background-color:red;">

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/consciousyouthuk">Conscious Youth C.I.C</a></blockquote></div></div>

<div style="margin:0 auto;width:340px;height:500px;background-color:red;">

<a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>

<div style="width:340px;height:500px;float:right;background-color:red;">

</div>

</div>

这里的图像显示了它正在做的事情：

Answer 1

嗨，您可以使用bootstrap网格轻松完成此操作。检查jsfiddle输出:: https://jsfiddle.net/ruokr7rp/1/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm" style="background-color:red;">



      <div id="fb-root"></div>
      <script>
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s);
          js.id = id;
          js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
      </script>
      <div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
        <blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/consciousyouthuk">Conscious Youth C.I.C</a></blockquote>
      </div>
    </div>


    <div class="col-sm" style="background-color:red;">


      <a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

    </div>


    <div class="col-sm" style="background-color:red;">



    </div>
  </div>
</div>

检查一下:: https://jsfiddle.net/ruokr7rp/