HTML浮動小数点が正しくオフセットされていません

Question

これはコードの結果です。私はそれがこのような何かになりたい場合は

<!-- footer begin --> 
       <footer> 
        <div > 
         <div class="row"> 
     </div> 
     <div > 
      <span style="font-size: 20px; color: #FFFFFF; line-height: 1.5;">Follow Us</span> 
      <div class="textwidget"><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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=106803696083496"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk'));</script> 

     <div class="fb-page" data-href="https://www.facebook.com/LedinMalaysia" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/LedinMalaysia"><a href="https://www.facebook.com/LedinMalaysia">LedinMalaysia</a></blockquote></div></div></div> 
       </div> 
     </div><!-- end col-lg-3 --> 
     <div class="col-md-4 col-sm-4" style="float: right;"> 
      <span style="font-size: 20px; color: #FFFFFF;">Contact Us</span>  <div class="textwidget"><address> 
             <span><strong>Address: </strong> 14, Jalan Klang Sentral 2/KU5, Klang Sentral, 41050 Klang, Selangor</span> 
             <span><strong>Phone: </strong> 03-3341 3227/03-3358 5990</span> 
             <span><strong>Email: </strong><a href="mailto:sales@ledinmalaysia.com"> sales@ledinmalaysia.com</a></span> 
             <span><strong>Web: </strong><a target="_blank" href="http://www.ledinmalaysia.com"> wwww.ledinmalaysia.com</a></span> 
            </address></div> 
       </div> 



        <div > 
         <div class="container"> 
          <div class="row">     
           </div> 
           <div > 
            <div class="social-icons">                  
               <a target="_blank" href="https://www.facebook.com/LedinMalaysia"><i class="fa fa-facebook"></i></a> 

            </div> 
           </div> 

          </div> 
         </div> 

       </footer> 
       <!-- footer close --> 

：It should be left and right but the right one is going below.

は、これは私のコードです。 Left and right equal

私はポジションを試してみました。私はFacebookのクラスがより小さいボックスになります。

Answer 1

左と右の2つのdivの位置を設定するには、最初のdiv float: left;と、float: right;を2番目のdivに付ける必要があります。そして、同じサイズの2つのdivを作るために、私はwidth: 50%を両方のdivに入れます。スニペットをチェックして、これが助けてくれることを願っています。 （ところで、あなたのリンクはあまりにもゆっくりと表示されます）。

<!-- footer begin --> 
 
<footer> 
 
    <div style="float: left;width: 50%;"> 
 
    <div class="row"></div> 
 
    <div> 
 
     <span style="font-size: 20px; color: #FFFFFF; line-height: 1.5;">Follow Us</span> 
 
     <div class="textwidget"> 
 
     <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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=106803696083496"; 
 
      fjs.parentNode.insertBefore(js, fjs); 
 
      }(document, 'script', 'facebook-jssdk')); 
 

 
     </script> 
 

 
     <div class="fb-page" data-href="https://www.facebook.com/LedinMalaysia" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"> 
 
      <div class="fb-xfbml-parse-ignore"> 
 
      <blockquote cite="https://www.facebook.com/LedinMalaysia"> 
 
       <a href="https://www.facebook.com/LedinMalaysia">LedinMalaysia</a> 
 
      </blockquote> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- end col-lg-3 --> 
 
    <div class="col-md-4 col-sm-4" style="float: right;width: 50%;"> 
 
    <span style="font-size: 20px; color: #FFFFFF;">Contact Us</span> 
 
    <div class="textwidget"> 
 
     <address> 
 
\t \t \t \t \t <span><strong>Address: </strong> 14, Jalan Klang Sentral 2/KU5, Klang Sentral, 41050 Klang, Selangor</span> <span><strong>Phone: </strong> 03-3341 3227/03-3358 5990</span> <span><strong>Email: 
 
\t \t \t \t \t </strong><a href="mailto:sales@ledinmalaysia.com"> sales@ledinmalaysia.com</a></span> <span><strong>Web: </strong><a target="_blank" href="http://www.ledinmalaysia.com"> wwww.ledinmalaysia.com</a></span> 
 
\t \t \t \t </address> 
 
    </div> 
 
    </div> 
 
    
 
    <div> 
 
    <div class="container"> 
 
     <div class="row"></div> 
 
     <div> 
 
     <div class="social-icons"> 
 
      <a target="_blank" href="https://www.facebook.com/LedinMalaysia"><i class="fa fa-facebook"></i></a> 
 

 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</footer> 
 
<!-- footer close -->

Answer 2

ただ、最初のFBのdivにfloat: leftスタイルを追加し、それが正常に表示されるはずです。私はJSFiddleを更新しました。テキストは白ですので、ハイライト表示する必要があります。