Question

我的页脚中的图标没有按计划排列。在移动设备上，他们按计划排队，但不在桌面上排队。

  <div class="row-fluid" style="padding-top: 2em;">
            <div class="span7" style="float: left;">
              <h4>info<br/> info<br/>info</h4>
            </div>

            <div class="span5" style="float: right;">
              <div class="socialcontainer"><a href="http://www.facebook.com"><img src="social_facebook.png" alt="Facebook"/></a> </div>
              <div class="socialcontainer"><a href="http://www.twitter.com"><img src="social_twitter.png" alt="Twitter"/></a></div>
              <div class="socialcontainer"><a href="http://www.instagram.com"><img src="social_instagram.png" alt="Instagram"/></a></div>
            </div>

          </div>

Answer 1

https:// jsfiddle. net/ hkbok1qr/

您的代码没有问题。请包含CSS。也许是导致问题的[CSS]。

Answer 2

试试这个：

 <div class="row-fluid" style="padding-top: 2em;">
            <div class="span7" style="float: left;">
              <h4>info<br/> info<br/>info</h4>
            </div>

         <div class="socialcontainer">
              <div class="social1"><a href="http://www.facebook.com"><img src="social_facebook.png" alt="Facebook"/></a> </div>
              <div class="social1"><a href="http://www.twitter.com"><img src="social_twitter.png" alt="Twitter"/></a></div>
              <div class="social2"><a href="http://www.instagram.com"><img src="social_instagram.png" alt="Instagram"/></a></div>
            </div>

          </div>

float: right;

您正在为包含该链接的每个div使用class socialcontainer加.socialcontainer{ float:right; } 代码在.socialcontainer {

.social1{
  float:left;
  width: 40%;
  height: 50%;
  margin-bottom: 2em;
}

.social2{
  float:right;
  width: 40%;
  height: 50%;
  margin-bottom: 2em;
}

所以在您的代码上的那一行之后是

{{1}}

我删除了宽度和高度以防止出现问题，希望它有所帮助！

垂直而不是水平排列的图标

2 个答案: