Иконы выстраиваются вертикально, а не горизонтально

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

Попробуйте это:

.socialcontainer{ 
 
    float:right; 
 
} 
 
.social1{ 
 
    float:left; 
 
    margin-bottom: 2em; 
 
} 
 

 
.social2{ 
 
    float:right; 
 
    margin-bottom: 2em; 
 
} 
 

 

 
// DELETED SOME LINES ....

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

Вы использовали класс socialcontainer для каждого DIV, содержащей ссылку плюс float: right; код на .socialcontainer {

.socialcontainer{ 
    float:right; 
} 

Таким образом, после этой линии на ваш код the a

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

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

Я удалил ширину и высоту, чтобы предотвратить проблемы, надеюсь, что это поможет!

Answer 2

https:// jsfiddle. net/ hkbok1qr/ 

Там нет никаких проблем с вашим кодом. Пожалуйста, включите CSS. Возможно, это проблема [CSS].