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

こんにちはあなたは、ブートストラップグリッドを使って、簡単にこれを行うことができます。 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/