Question

这是代码的结果。It should be left and right but the right one is going below.

这是我的代码：

 <!-- 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 -->

如果我能想要它是这样的话。 Left and right equal

我已经尝试过绝对的位置我将facebook类变成一个小盒子。

Answer 1

要设置左右两个div的位置，您需要提供第一个div float: left;以及float: right;给你的第二个div。为了使两个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>
					<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 -->

Answer 2

只需在第一个FB div上添加float: left样式，它就会显示正常。我更新了JSFiddle。文本为白色，因此您可能需要突出显示才能看到它。

HTML浮动没有正确抵消

2 个答案: